System.js Starter Project

Techniques

• System.js
• react
• babeljs
• react-router
• eslint
• gulp Aren't NPM scripts better? No.
• three.js
• ECharts
• react-bootstrap
• And much more. Check source code.

Prerequisites

• node.js (Node 5 with npm 3 is required).
• gulp (npm install -g gulp)

If you are using different node versions on your machine, use nvm to manage them.

Getting Started

1. Install the local packages for this demo.

npm install

2. Run the server, launch the browser, and transpile the ES6 to ES5 using Babel

npm start

Details

The source code is located in the js folder and written in ES6. We use gulp to transpile the ES6 to ES5 using Babel. The npm start command runs the gulp serve task which transpiles the code and puts it in the dist folder and then watches for more changes. If you change the source, it will transpile again. It also runs the superstatic server (you can run any server you want, but this is super simple) and launches the browser using browser-sync. When any files change, the browser will reload.

When you launch a browser to http://localhost:3000 SystemJS kicks in and looks for system.config.js for its settings. We tell SystemJS to use Babel to transpile and that the baseURL for the code is in ./assets. This is important so all import statements that were written assuming relative pathing in the src folder will still work. Finally, we tell SystemJS that import statements by default should assume they end with .js. This is accomplished by setting defaultJSExtensions to true. See below for an example.

System.config({
    baseURL: './assets',
    defaultJSExtensions: true
});

We can now import the main starting modules main.js like this:

System.import('demo/main');