gulp安装插件支持es6

    亲自操刀一波gulp如何兼容ES6 的实践，毕竟实践出真知。先百度一波gulp es6，拿到一堆命令。

// babel 依赖的包 但是看babel官方说并没有依赖这个如果不安装会报错
npm install babel-core --save-dev
// 转码所需要的模板
npm install babel-preset-env --save-dev
// babel转码的核心包这里安装7的版本如果不写默认安装8.0.0的版本
//但是在npm上看到的是最新版本是7的 如果安装了8的版本会一直报找不到babel-core的错误
npm install gulp-babel@7 babel-core --save-dev
// 用非严禁模式编译
npm install babel-plugin-transform-remove-strict-mode --save-dev

    然而

npm install babel-core --save-dev

    这句命令就卡住下载不了，只能走淘宝镜像。后面就同样改用淘宝镜像，版本6.26.3

cnpm install babel-core --save-dev
cnpm install babel-preset-env --save-dev
//我漏了第三句命令导致后面出现的gulp-babel没找到
cnpm install gulp-babel@7 babel-core --save-dev

    根据参考的文章步骤，在项目根目录下创建babel的配置文件.babelrc 文件。写入内容。

//.babelrc
{
	  "presets": [
	    [ "env",
	      { "modules": false }
	    ]
	  ],
	  "plugins": ["transform-remove-strict-mode"]
	}

    但是看了下文章后面的描述，感觉目前的配置文件的modules:false和非严格模式不太适合layui，先试试只是env。

//.babelrc
{
	  "presets": [
	    [ "env"
	    ]
	  ]
	}

    再修改gulpfile文件。

//gulpfile.js
var babel = require("gulp-babel");//引入babel

//原来的命令
gulp.src(src).pipe(uglify())
     .pipe(header.apply(null, note))
    .pipe(gulp.dest(destDir));
    
//修改后的命令
gulp.src(src)
    .pipe(babel())
    .pipe(uglify())
     .pipe(header.apply(null, note))
    .pipe(gulp.dest(destDir));

    开始尝试。

    开始即是失败。认真看了下参考文章，补充执行漏掉的gulp-babel命令。执行完再次构建。这次成功完成命令了。不过测试的语句只是箭头函数，下面将es6的新写法都放到js文件中测试一下。

// 箭头函数 
let f = a => a + 1;
// 等价于
var f = function(a) {
return a + 1;
}
// 模版字符串
let a = 'react'
let s = `hello ${a}`;  // hello react
// 解构赋值
let [ lang, ...other ] = ['js', 'java', 'react'];  // js , ['java', 'react']
// 扩展运算符 合并数组
let arr1 = ['a', 'a1'];
let arr2 = ['b'];
let newArr = [...arr1, ...arr2]  // ['a', 'a1', 'b']
// 对象解构
let { person: {name, age}, foo } = { person : {name: 'tom', age: 4}, foo: 'foo' }
console.log(name, foo, age)  // tom , foo , 4
// 默认值
let t = (a = 1) => a + 2
t(2)  // 4
t() // 3
let o = '';
let temp = o || 1  // 1
// map用法
arr1.map(item => (
item
))
// filter
arr1.filter(item => (item != 'a'))  // a1
// swap 变量值交换
let foo = 1
let bar = 2
;[foo, bar] = [bar, foo]

    再次编译。

    重复声明了，修改下测试的写法。把最后的foo修改成foo1。再次构建。正常编译，转换成功。再百度下ES6的新API的转换。需要使用babel-polyfill。这个是直接引入JS文件polyfill.js，当然了这个是浏览器不支持ES6的时候我们再引入，对gulp构建不影响，需要的时候就在layui中动态插入script标签引入或把polyfill.js修改成layui模块。

    参考资料：https://blog.csdn.net/WU5229485/article/details/90177521

    https://blog.csdn.net/guang_s/article/details/84828003