It works out the main entry point and configuration file for the HTML asset, and then generates the SystemJS bundle, or injects the depcache if using HTTP/2 for optimization.

Installation

npm install assetgraph systemjs-assetgraph

Usage

Consider a simple SystemJS application:

app/main.html

<html>
  <script src="system.js"></script>
  <script src="config.js"></script>
  <script>System.import('main')</script>

We can build this with:

build.js

var AssetGraph = require('assetgraph');
var systemJsAssetGraph = require('systemjs-assetgraph');

var outRoot = 'app-built';

new AssetGraph({root: 'app'})
  .loadAssets(['*.html', '*.js'])
  .queue(systemJsAssetGraph({
    outRoot: 'app-built',
    bundle: true,
    builderConfig: {
      sourceMaps: true,
      lowResSourceMaps: true,
      minify: true,
      mangle: true,
      config: {
        map: {
          app: 'app-compiled',
        },
      }
  }
  }))
  .writeAssetsToDisc({url: /^file:/}, 'app-built')
  .run(function (err) {
    if (err) throw err;
    console.log('Done');
  });

The SystemJS transform will automatically detect the System.config(...) and know to bundle main.

It will then update the config to reference the bundled file, with full source maps support.

Config Overrides

It can be useful to specify configuration overrides that are specifically for the production / build config.

This can be added with the builderConfig.config option:

  .queue(systemJsAssetGraph({
    outRoot: 'app-built',
    bundle: true,
    builderConfig: {
      config: {
        map: {
          'some/module': 'production/module'
        }
      }
    }
  }))

HTTP/2 Optimization

In HTTP/2, rather than generating a single bundle file, we can inject the dependency tree into the page, so that all modules are loaded in parallel.

This mode is enabled by setting bundle: false in the options.

In addition, each of the separate module files will be moved to a hashed file name and the hashes injected into the configuration so that when making application updates, only those modules that have changed need to be reloaded in the browser cache.

License

MIT

FAQs

What is systemjs-assetgraph?

Is systemjs-assetgraph well maintained?

Package last updated on 02 Feb 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

systemjs-assetgraph