Babel核心用法记要

更新于 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"]
}