更新于 2016.04.07

把經常會用到的核心用法收集到這里面記下來咯！方便自己和大家快速查看。

兩個有用的資源見文后的推薦閱讀

Babel一句話介紹

一個js編譯器，把瀏覽器不支持的js轉譯成瀏覽器支持的js

安裝Babel

不建議把Babel安裝到全局，建議安裝到項目的devDependencies里

npm i -D babel-cli

.babelrc文件

建議用.babelrc來配置babel

{
  "presets": [],
  "plugins": []
}

一般會用到的兩個套件react，es2015

安裝babel-preset-es2015和babel-preset-react

npm i -D babel-preset-es2015 babel-preset-react

配置.babelrc文件

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": []
}

CLI用法

配置.babelrc文件

{
  "presets": [
    // 需要用到的套件
  ],
  "plugins": [
    // 需要用到的插件
  ]
}

轉譯文件到文件

babel example.js -o compiled.js

轉譯目錄到目錄

babel src -d dist

監聽文件變化

babel -w src -d dist

Webpack用法

1. 安裝babel-loader

   npm i -D babel-loader babel-core
   

2. 配置loader

   module: {
     loaders: [{
       test: /\.js$/,
       exclude: /node_modules/,
       loader: "babel-loader"
     }]
   }
   

3. 配置.babelrc文件

   {
     "presets": [
       // 需要用到的套件
     ],
     "plugins": [
       // 需要用到的插件
     ]
   }
   

注意：要配置好.babelrc文件

Gulp用法

1. 安裝gulp-babel

   npm i -D gulp-babel
   

2. 定義task

   var gulp = require("gulp");
   var babel = require("gulp-babel");
   
   gulp.task("default", function () {
     return gulp.src("src/app.js")
       .pipe(babel())
       .pipe(gulp.dest("dist"));
   });
   

3. 配置.babelrc文件

   {
     "presets": [
       // 需要用到的套件
     ],
     "plugins": [
       // 需要用到的插件
     ]
   }
   

Babel套件與插件

babel-preset-es2015

適用于ES6的套件

npm i -D babel-preset-es2015

.babelrc

{
    "presets": ["es2015"]
}

babel-preset-react

適用于React的套件

npm install --save-dev babel-preset-react

.babelrc

{
    "presets": ["react"]
}

object-assign

適用于Object.assign()

舉例

var obj = { a: 1 };
var copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

安裝

npm install babel-plugin-transform-object-assign

.babelrc

{
  "plugins": ["transform-object-assign"]
}

object-rest-spread

適用于展開運算符

舉例

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

安裝

npm install babel-plugin-transform-object-rest-spread

.babelrc

{
  "plugins": ["transform-object-rest-spread"]
}