angular es6

angular_es6_howto.md

• use a recent version of nodejs ex. v0.12.2
• install necessary modules

npm install -g npm
npm install -g coffee-script 
npm install -g jade babel jade-babel
npm install -g gulp
npm install -g yo jspm
npm install -g generator-systemjs 

• create a sample project skeleton. Follow steps here https://github.com/lookfirst/generator-systemjs/

mkdir myapp && cd myapp
yo systemjs
gulp run
http://localhost:9000

• systemjs 用了 es6-module-loader (同一個作者)
• es6-module-loader 自稱是 ES6 Module Loader Polyfill
  • polyfill 意思就是可以在只支援 ES5的 JS runtime , 使用 import/export 來取用 module囉?
  • 寫了 import export 的 JS code, 如果事先用 babel transpile , 會自動幫你轉成 require, 並不需要 systemjs/es6-module-loader

http://developer.telerik.com/featured/choose-es6-modules-today/
You want to do this because building a standards-compliant and future-friendly application, while not tightly coupling yourself to AMD or CommonJS (and friends) and their respective package managers

USE ECMASCRIPT 6 MODULES TODAY

不確定他的意思是用說 "今天開始只用 ES6 語法來寫 module ? " , 或是"今天開始只用 ES6 語法寫的 modules"

By using jspm.io you can make use of the official JavaScript module control system (and its syntax) today – all while not having to wait for older modules to be re-written or having to limit yourself to one particular module format or package manager. In other words, you shouldn’t have to care from where a package comes and in what format it’s being provided.

意思就是你可以專注只用 ES6 import 來取用現有的 JS module , 無論這個module 是用 commonjs 還是 AMD. jspm 會把它重包.

底下comments 對 jspm/systemjs vs webpack 有很多討論.

成本

-rw-r--r--@ 1 timwu  staff   129K  7  1 09:54 js/browser-polyfill.js
-rw-r--r--@ 1 timwu  staff    83K  7  1 09:54 js/browser-polyfill.min.js
-rw-r--r--@ 1 timwu  staff   2.0M  7  1 09:54 js/browser.js
-rw-r--r--@ 1 timwu  staff   1.3M  7  1 09:54 js/browser.min.js
-rw-r--r--@ 1 timwu  staff   1.2M  7  1 18:46 js/traceur.js

es6-module-loader transpiler 選babel不會動, 選 traceur 可動

但是 systemjs transpiler 選 babel 會動

System.config({
  "baseURL": ".",
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  "paths": {
    "*": "*.js",
    "github:*": "../jspm_packages/github/*.js",
    "npm:*": "../jspm_packages/npm/*.js"
  },
  "buildCSS": true,
  "separateCSS": false
});

http://www.2ality.com/2015/04/webpack-es6.html