1 | SystemJS
|
2 | ========
|
3 |
|
4 | [![Build Status][travis-image]][travis-url]
|
5 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/systemjs/systemjs?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
6 |
|
7 | _For upgrading to SystemJS 0.17 / 0.18, see the [SystemJS 0.17 release upgrade notes for more information](https://github.com/systemjs/systemjs/releases/tag/0.17.0), or read the updated [SystemJS Overview](docs/overview.md) guide._
|
8 |
|
9 | Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.
|
10 |
|
11 | * [Loads any module format](docs/module-formats.md) with [exact circular reference and binding support](https://github.com/ModuleLoader/es6-module-loader/blob/v0.17.0/docs/circular-references-bindings.md).
|
12 | * Loads [ES6 modules compiled into the `System.register` bundle format for production](docs/production-workflows.md), maintaining circular references support.
|
13 | * Supports RequireJS-style [map](docs/overview.md#map-config), [paths](docs/overview.md#paths-config), [bundles](docs/production-workflows.md#bundle-extension) and [global shims](docs/module-formats.md#shim-dependencies).
|
14 | * [Loader plugins](docs/overview.md#plugins) allow loading assets through the module naming system such as CSS, JSON or images.
|
15 |
|
16 | Built on top of the [ES6 Module Loader polyfill](https://github.com/ModuleLoader/es6-module-loader).
|
17 |
|
18 | ~14KB minified and gzipped, runs in IE8+ and NodeJS.
|
19 |
|
20 | For discussion, [see the Google Group](https://groups.google.com/group/systemjs).
|
21 |
|
22 | For a list of guides and tools, see the [Third-Party Resources Wiki](https://github.com/systemjs/systemjs/wiki/Third-Party-Resources).
|
23 |
|
24 | Documentation
|
25 | ---
|
26 |
|
27 | * [ES6 Modules Overview](docs/es6-modules-overview.md)
|
28 | * [SystemJS Overview](docs/overview.md)
|
29 | * [Config API](docs/config-api.md)
|
30 | * [Module Formats](docs/module-formats.md)
|
31 | * [Production Workflows](docs/production-workflows.md)
|
32 | * [System API](docs/system-api.md)
|
33 | * [Creating Plugins](docs/creating-plugins.md)
|
34 |
|
35 | Basic Use
|
36 | ---
|
37 |
|
38 | ### Browser
|
39 |
|
40 | ```html
|
41 | <script src="system.js"></script>
|
42 | <script>
|
43 | // set our baseURL reference path
|
44 | System.config({
|
45 | baseURL: '/app'
|
46 | });
|
47 |
|
48 | // loads /app/main.js
|
49 | System.import('main.js');
|
50 | </script>
|
51 | ```
|
52 |
|
53 | To load ES6, locate a transpiler ([`traceur.js`](https://github.com/jmcriffey/bower-traceur), ['browser.js' from Babel](https://github.com/babel/babel), or ['typescript.js' from TypeScript](https://github.com/Microsoft/TypeScript))
|
54 | in the baseURL path, then set the transpiler:
|
55 |
|
56 | ```html
|
57 | <script>
|
58 | System.config({
|
59 | // or 'traceur' or 'typescript'
|
60 | transpiler: 'babel'
|
61 | // or traceurOptions or typescriptOptions
|
62 | babelOptions: {
|
63 |
|
64 | }
|
65 | });
|
66 | </script>
|
67 | ```
|
68 |
|
69 | Alternatively a custom path to Babel or Traceur can also be set through paths:
|
70 |
|
71 | ```javascript
|
72 | System.config({
|
73 | map: {
|
74 | traceur: 'path/to/traceur.js'
|
75 | }
|
76 | });
|
77 | ```
|
78 |
|
79 | ### Polyfills
|
80 |
|
81 | SystemJS relies on `Promise` and `URL` being present in the environment. When these are not available it will send a request out to the `system-polyfills.js` file located in the dist folder which will polyfill `window.Promise` and `window.URLPolyfill`.
|
82 |
|
83 | This is typically necessary in IE, so ensure to keep this file in the same folder as SystemJS.
|
84 |
|
85 | Alternatively the polyfills can be loaded manually or via other polyfill implementations as well.
|
86 |
|
87 | ### NodeJS
|
88 |
|
89 | To load modules in NodeJS, install SystemJS with:
|
90 |
|
91 | ```
|
92 | npm install systemjs
|
93 | ```
|
94 |
|
95 | If transpiling ES6, also install the transpiler:
|
96 |
|
97 | ```
|
98 | npm install traceur babel typescript
|
99 | ```
|
100 |
|
101 | We can then load modules equivalently to in the browser:
|
102 |
|
103 | ```javascript
|
104 | var System = require('systemjs');
|
105 |
|
106 | System.transpiler = 'traceur';
|
107 |
|
108 | // loads './app.js' from the current directory
|
109 | System.import('./app').then(function(m) {
|
110 | console.log(m);
|
111 | });
|
112 | ```
|
113 |
|
114 | If using TypeScript, set `global.ts = require('typescript')` before importing to ensure it is loaded correctly.
|
115 |
|
116 | ### Plugins
|
117 |
|
118 | Supported loader plugins:
|
119 |
|
120 | * [CSS](https://github.com/systemjs/plugin-css) `System.import('my/file.css')`
|
121 | * [Image](https://github.com/systemjs/plugin-image) `System.import('some/image.png!image')`
|
122 | * [JSON](https://github.com/systemjs/plugin-json) `System.import('some/data.json')`
|
123 | * [Text](https://github.com/systemjs/plugin-text) `System.import('some/text.txt!text')`
|
124 |
|
125 | Additional Plugins:
|
126 |
|
127 | * [CoffeeScript](https://github.com/forresto/plugin-coffee) `System.import('./test.coffee')`
|
128 | * [Jade](https://github.com/johnsoftek/plugin-jade)
|
129 | * [Jade VirtualDOM](https://github.com/WorldMaker/system-jade-virtualdom)
|
130 | * [JSX](https://github.com/floatdrop/plugin-jsx) `System.import('template.jsx')`
|
131 | * [Markdown](https://github.com/guybedford/plugin-md) `System.import('app/some/project/README.md').then(function(html) {})`
|
132 | * [WebFont](https://github.com/guybedford/plugin-font) `System.import('google Port Lligat Slab, Droid Sans !font')`
|
133 | * [Handlebars](https://github.com/davis/plugin-hbs) `System.import('template.hbs!')`
|
134 | * [Ember Handlebars](https://github.com/n-fuse/plugin-ember-hbs) `System.import('template.hbs!')`
|
135 | * [raw](https://github.com/matthewbauer/plugin-raw) `System.import('file.bin!raw').then(function(data) {})`
|
136 | * [jst](https://github.com/podio/plugin-jst) Underscore templates
|
137 |
|
138 | [Read about using plugins here](docs/overview.md#plugin-loaders)
|
139 | [Read the guide here on creating plugins](docs/creating-plugins.md).
|
140 |
|
141 | #### Running the tests
|
142 |
|
143 | To install the dependencies correctly, run `bower install` from the root of the repo, then open `test/test.html` in a browser with a local server
|
144 | or file access flags enabled.
|
145 |
|
146 | License
|
147 | ---
|
148 |
|
149 | MIT
|
150 |
|
151 | [travis-url]: https://travis-ci.org/systemjs/systemjs
|
152 | [travis-image]: https://travis-ci.org/systemjs/systemjs.svg?branch=master
|