system-amd-script

3.0.0 • Public • Published

system-amd-script

SystemJS plugin for script loading AMD modules

npm version Build Status Code Coverage

Motivation:

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.

Installation:

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-script

Usage:

You 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!';

Pre-loading modules

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>

Readme

Keywords

Package Sidebar

Install

npm i system-amd-script

Weekly Downloads

0

Version

3.0.0

License

MIT

Unpacked Size

40.9 kB

Total Files

12

Last publish

Collaborators

  • blittle
  • joeldenning