ES6, webpack/babel and workflow

Jeremy Lu (jeremy@pubuous.com) Jun 06, 2015

es6

• 學習資源

  • http://babeljs.io/docs/learn-es2015/

  • http://babeljs.io/repl/

  • ES6 已更名為 ES2015

• 重要指令

  • let, const

  • Arrow Function

     // example
     nums.forEach( (v, i, arr)  => {
       if (v % 5 === 0)
         fives.push(v);
     });
    

  • Destructuring

     // example
     var arr = [1,2,3]; // a=1, b=3
     var [a, , b] = arr;
     var {b} = {a:'aa', b:'bb'};
    

  • Class

     // example
     class SkinnedMesh extends THREE.Mesh {
    

  • Template Strings

     // example
     var foo = 'bar'
     `${foo}`
    

  • Promise

     // example
     new Promise((resolve, reject) => {
         setTimeout(resolve, duration);
     })
    

  • Generator -> async, await // es7

     //example
     function* foo(){
     	yield 'bar';
     }
    

如何執行 es6

nodejs

• 建議至少 v0.12 或 io.js v2 以上版本

• $node --harmony --harmony-generators

  • 不可靠

• babel-node

  $ npm i babel -g

  • 要取代原本 node 指令
  • production server

• require('babel/register')

  $ npm i --save-dev babel

  • 要多一個 entry.js 來 require() 其它檔案

browser

• 用 webpack 打包 js 成 bundle.js
• 過程中套用 babel loader 將 es6 轉成 es5

webpack/babel

• 建立 webpack.config.js 檔案

• 開發時啟動 local web server

  • webpack-dev-server

  $ webpack-dev-server --progress

• 執行 build

  • 安裝
    • webpack
    • babel-loader

  $ webpack -d // 然後訪問 http://localhost:8080 $ webpack -p // 得到壓縮與不含 sourcemap 的 bundle.js 檔案

良好開發手法

• 程式模組化，一個功能一支 js
• 使用 CommonJS 語法，別用 AMD 例如 requirejs

Workflow

前端開發情境

- dev
	- 開發時需要盡快將程式碼重新編譯、打包並刷新瀏覽器
	- 產生 sourcemap 方便在 DevTools 內除錯

- build
	- 將專案所有 assets (js, css, html, images) 等編譯、合成、壓縮並搬到適當的位置
	- 例如將 100 支 js 檔案合成為一個 bundle.js 
	- 或將 vendor/ 與 assets/ 下所有檔案搬到 build/ 目錄下

- deploy
	- 做完 build 流程後，將封裝好的檔案上傳到遠方主機(例如 EC2)
	- 在遠端主機上重啟 app 與 db，做 zero-downtime deployment
	- 常見手法是透過 ssh + rsync 將整包目錄上傳

常用工具

- node.js
	- javascript 執行環境，常用於 server，但也適用在本機進行自動化工作

- npm
	- node.js 內建的套件管理系統，有十萬筆以上套件可取用，例如 jquery, bootstrap, react 皆包含在內
	- 特別注意 package.json 內 scripts:{} 內的各種指令

- gulp
	- 組建系統(build system)，將專案封裝為可最終輸出的格式，通常包含大量自動化流程
	- 現在流行用 npm scripts 直接取代

- webpack
	- 處理 module 相依關係
	- 程式碼打包器(module bundler)，將多支 javascript 檔案合成一支並在過程中做轉換處理
	
- babel
	- 轉換 es6 為 es5
	- 轉換 jsx, flow 為 es5

常見問題

• webpack 與 gulp 區別

  • webpack 是 bundler，將多支檔案進行編譯後結合為一份檔案，輸出為 bundle.js

  • gulp 是 build 工具，可自動化許多工作，將來做 Continous Integration & Deployment 很方便

• webpack 與 browserify 差異

  • browserify 先出來，是老牌好用的 bundle 工具

  • 但 webpack 俱備下列優勢

    • 可輕易切分多個 bundle，並在需要時自動載入

      • multiple entry point
        • bundle.js ← 原本 3MB 的檔案，可切成三份小的檔案
        • main.js
        • b.js
        • c.js

    • 支援 Hot Module Replacement 僅更新部份頁面內容

      • 由於不是整頁更新，因此可保留程式狀態，方便測試
      • 跟 react 搭配更強大

    • 提供簡易的 local web server 方便開發

      $ webpack-dev-server // 即可訪問 http://localhost:8080

• npm 與 bower 的差異

  • bower 是 twitter 推出
  • 專用於前端套件管理
  • 但後來 npm 內也有大量前端套件
  • 人們希望用一個套件管理程式就兼顧前/後端，因此 npm 勝出成為主流

• CommonJS 與 RequireJS 的差異

  • requirejs 語法醜，東西一大時難管理

    // 如果 require 20 支程式，後面 function 就要依序列20個參數，缺一不可 var js = require(['a', 'b', 'c', function(a, b, c){ // });

  • requirejs config 難懂

    • 也不利於與各種 testing framework 整合

  • CommonJS 的優點

    • 語法簡潔
    • node.js 通用多年
    • 有 webpack 幫忙 bundle，用於 browser 內毫無困難

• 什麼是 Continous Integration & Deployment (CI, CD)

  • CI: 每次有人 commit 就自動跑所有 test 確保都通過

  • CD: 每次 commit 通過 CI 測試後，自動佈署到 server 上

    • "deploy on green"