Babel —— Webpack及Gulp的配合使用

1、Webpack用法

(1)安装babel-loader

npm install babel-loader babel-core --save -dev

(2)

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

(3)配置.babelrc文件

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

注意：要配置好.babelrc文件

2、Gulp用法

(1)安装gulp-babel

npm install gulp-babel --save -dev

(2)

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": [
       // 需要用到的插件
       ]
}

(4)Babel套件与插件

3-1:适用于ES6的套件: babel-preset-es2015

npm install babel-preset-es2015 --save -dev

.babelrc

{
    "presets": ["es2015"]
}

3-2:适用于React的套件:babel-preset-react

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

.babelrc

{
    "presets": ["react"]
}

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

3-4: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"]
}