Comments (12)
Can you give an example of how you're trying to use loadjs
with react/node?
Although loadjs
can technically be used with node, it is meant as an in-browser async loader that is best used when you embed the code in the HTML payload so you can use it to trigger your initial script loads:
<html>
<head>
<script>/* embedded loadjs code */</script>
<script>
window.addEventListener('load', function() {
loadjs('/path/to/react.js', 'react');
loadjs.ready('react', function() {
console.log('React is ready');
});
});
</script>
</head>
</html>
In general I would recommend using require/import
within your code and loadjs
only to load your code in the browser.
from loadjs.
Hi, so this is my current use-case. I have a react app and im using webpack as the package manager. Basically i want to try and not include the scripts that i want downloaded in the head/bottom of the body tag of my index.html but rather load them asynchronously only when my component requires it (client side). (At the moment I want to load googles platform.js, but i would like to load other libraries such as facebook etc).
I understand that this wouldnt be of much use if i were to try and render these components server side (isomorphic app).
Wouldn't something like this be exactly what I am looking for or would you say that what im trying to accomplish shouldn't be done using a library such as this? I just found this https://github.com/dozoisch/react-async-script as a possible solution however which i may try and use if i cant create something a little more custom using a library such as this.
from loadjs.
In this scenario it sounds like you're trying to do two things:
- load critical app dependencies asynchronously on pageload (e.g. React)
- load other dependencies asynchronously when the component requires it
Although there's some overlap in these use cases, loadjs
is better suited for the first use case because it's extremely lightweight and can be embedded on every pageload. For the second use case you're probably better off using a more fully featured dependency loader. In general, I would think of loadjs
as a tool for optimizing app load times.
Depending on what your requirements are you could use loadjs
to load your app dependencies in parallel rather than trying to load them when your component requires them:
<html>
<head>
<script>/* embedded loadjs code */</script>
<script>
window.addEventListener('load', function() {
loadjs('/path/to/react.js', 'react');
loadjs('/path/to/google.js', 'google');
loadjs('/path/to/facebook.js', 'facebook');
loadjs('/path/to/app.js', 'app');
loadjs.ready(['react', 'google', 'facebook', 'app'], function() {
/* Bootstrap app here */
});
});
</script>
</head>
</html>
Another option is to use loadjs
to pre-fetch the non-critical dependencies on pageload and fall back to your app's dependency loader if the dependency hasn't been met when the component requires it:
<html>
<head>
<script>/* embedded loadjs code */</script>
<script>
window.addEventListener('load', function() {
loadjs('/path/to/react.js', 'react');
loadjs('/path/to/app.js', 'app');
loadjs.ready(['react', 'app'], function() {
/* Bootstrap app here */
});
// pre-fetch component dependencies
loadjs(['/path/to/google.js', '/path/to/facebook.js']);
});
</script>
</head>
</html>
from loadjs.
Hi! I currently use $script loader like this:
<script>
var $script = require('scriptjs');
$script(['/jquery.js', '/app.js'], function() {
require('app').init();
})
</script>
requiring the $script works because of this code browserified during the building (and placed back to <script>
tag). So, I want to switch to load.js, but I can't.
Any chances, that some UMD support would be added to module?
from loadjs.
Sure, I can take a closer look at this. I'm traveling at the moment so if you want to take a stab at it and issue a pull request that would be very much appreciated!
from loadjs.
To test out a version of loadjs
that works with node/browserify/webpack you can check out the loadjs:pkg
branch and install the npm package directly from the repo:
$ git clone [email protected]:muicss/loadjs.git
$ cd loadjs
$ git checkout pkg
$ cd /path/to/project
$ npm install /path/to/loadjs/packages/npm
Then you can use it like this:
var loadjs = require('loadjs');
loadjs('/path/to/script.js', function() {
console.log('script.js loaded successfully');
});
Keep in mind that the loadjs()
method will fail if document
isn't defined (e.g. inside nodejs).
from loadjs.
Thanks for the code, but I've actually thought about slightly simpler approach. Diff of src/loadjs.js
messed up because of indent, so I'll try to explain changes by myself. IIFE wrap is thrown away, document
isn't passed as parameter anymore, export is performed through return
. UMD and old IIFE versions are generated with help of gulp-umd
plugin.
I think it's better because it separates the support of all these module systems from lib logic. And you don't need to duplicate README.md, package.json, LICENSE.txt files in the distribution.
One more question: do you plan to publish it on npmjs.org?
I'll make PR if you like this.
from loadjs.
@revyh Excellent! Taking a quick look at your code, it looks like a much better approach. Please issue a pull request when you're ready!
from loadjs.
Hi,
I create a component with webpack
ant set libraryTarget: "umd"
in config file. Then load bundle file to my another React project with this:
const modName = 'MyComponent';
loadjs([`../../lib/${modName}/index.js`], modName, {
success: () => {
console.log('load js ');
},
});
after load js
output, how can I get the component object to render?
I tried with this solution with:
window.MyComponentLib.App.bind({})
but it returns undefined
.
from loadjs.
Is the console.log()
statement in the success callback being reached? What is undefined
? If you can provide some example code maybe I can give a more specific suggestion.
from loadjs.
Thank you @amorey for reply.
The problem has been solved. loadjs
create a property in window
and it use the export name of the library in webpack
like this:
output: {
filename: "[name].js",
libraryTarget: "umd",
library: "AwesomeComponent",
},
I didn't find that at first.
from loadjs.
Great! Thanks for the followup.
from loadjs.
Related Issues (20)
- How to Solve the Problem of Repeated Loading of Scripts HOT 3
- Is it possible to load JSON? HOT 2
- Stylesheets not loading in ie11 HOT 4
- Using loadjs in a Vanilla project: require is not defined error HOT 2
- CSS order HOT 2
- Security policy questions HOT 3
- Old browsers (Opera12) can't use document.head HOT 3
- Success/Error callbacks never called when the script element has the "nomodule" attribute. HOT 15
- More details than "path not found" HOT 2
- Announcement: New version with support for Promises and an Edge CSS onerror bugfix HOT 1
- Update comments in src to clarify arguments to loadJs HOT 1
- Custom script attributes HOT 3
- Ability to insert elements after or before certain element HOT 2
- Image loading and error handling HOT 2
- Support "defer" as well as "async"? HOT 6
- query args cause issues with native file type detection HOT 5
- Idempotent request option HOT 5
- Can not detect image if url has ?=rand123456 HOT 1
- Announcement: New version with support for image/css urls with query arguments and anchor tags
- Action required: Greenkeeper could not be activated 🚨
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from loadjs.