Babel核心用法记要

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"]
}