SystemJS plugin for script loading AMD modules
By default SystemJS requests resources by making an XHR request and evaling the code. This is done to allow transpiling the source at runtime in the browser before it gets evaled. The problem is evaling the code isn't necessarily performant. Also, it can screw up stack traces recorded by error services (sentry, trackjs, etc). System-amd-script uses script tags to load the modules instead.
Loaded modules must be named AMD modules where the name in the define statement is the same as the name that is being imported. It is recommended to use a locate plugin for AMD resources. Sofe works well for this.
jspm install npm:system-amd-scriptYou will need to load the setup file before loading any modules. You can do this by bundling or importing the setup file, or manually adding it to your HTML:
<html>
<script src="/system.js"></script>
<script src="/system-script-setup.js"></script>
<!--- or --->
<script>
SystemJS.import('system-amd-script/lib/system-script-setup.js');
</script>
</html>Now you can easily load modules via script tags:
// Module helper.js
define('helper', [], _ => {
return _ => 'Some value!';
});
// Entry app.js
import getValue from 'helper!system-canopy-script';
getValue() === 'Some value!';You can preload modules by directly putting your module's script tag into your index.html page:
<html>
<script src="/system.js"></script>
<script src="/system-script-setup.js"></script>
<script src="/helper.js"></script>
<script>
// Because the helper script tag is already on the page,
// a new one will not be added!
System.import('helper!system-canopy-script');
</script>
</html>