gulp配置ES6

最近在做gulp项目,但是现在es6语法很火,怎么让gulp支持es6呢,我可以费了一番功夫
接下来就直接上案例吧

• 1.安装es6转es5所需要的包

// 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上的babel最新的版本只有7.0.1但是安装的版本是8.0的版本这样会报找不到babel-core的错误

• 2.在根目录下面创建一个.babelrc文件这个文件是babel的配置文件 就是和gulpfile.js同级的文件夹下面,写这个内容

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

• 1 .babelrc是babel的配置文件
  2 presets 转码规则
  现如今不同的浏览器和平台chrome, opera, edge, firefox, safari, ie, ios, android, node, electron
  不同的模块 "amd" ， "umd" ， "systemjs" ， "commonjs"
  这些es运行环境对es6,es7,es8支持不一，有的支持好，有的支持差，为了充分发挥新版es的特性，我们需要在特定的平台上执行特定的
  转码规则，说白了就像是按需转码的意思
• 3 babel-preset-env可以设置一些选项，这里就介绍几种，有兴趣自己去看英文文档
  targets 指定运行环境
  targets.node 指定node版本
  targets.browsers 指定浏览器版本
  modules 指定何种形式的模块，设置为false表示不转码模块
• 4 在没有配置项的情况下，babel-preset-env表现的同babel-preset-latest一样(或者可以说同babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017结合到一起，表现的一致)

• 3. 具体配置书写方式如下
• 自动转码

{
    "presets": ["env"]
}
// 上面这个配置的作用和babel-prset-latest的作用一致也就是下面这个配置
{
    "presets": ["latest"]
}

{
    "presets": [
        ["env",{
            "targets": {
                "chrome": 52,
                "browsers": ["last 2 versions","safari 7"]
            }
        }]
    ]
}

• 相同的，如果你的运行环境使node.js，你页可以配置babel-preset-env来支持一个特殊的node版本 指定版本

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

当前最新版本

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

babel模板编译官网 https://babeljs.io/docs/en/babel-preset-env/

• 4.在gulpfile.js里面引入babel

  
  
• 5.转码js

const babel = require('gulp-babel');
gulp.task('js',function () {
    return gulp.src(app.srcPath+'js/**/*.js')
        .pipe(babel())
        .pipe(concat('index.js'))
        .pipe(gulp.dest(app.buildPath+'js/'))
        .pipe(uglify())
        .pipe(gulp.dest(app.distPath+'js'))
        .pipe(connect.reload())
});

• 6. 执行gulp命令就好了

持续更新实用的干货
简书关注coderYJ
微博关注coderYJ
微信公众号关注coderYJ