gulp之ES6转ES5

导读

默认的gulp打包编译，是不支持es6语法，所以我们需要引入babel进行转换编译

步骤

1、安装es6转es5所需要的所有npm依赖包

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

• babelrc是babel的配置文件

3、在gulpfile.js里面引入babel

let babel = require("gulp-babel")

4、在gulpfile.js里面使用babel对ES6转译

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())
});

文章来自https://www.jianshu.com/p/3a5c765092f3

在配置调试过程中，遇到一个错误

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PneaJv0x-1579504754739)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1567567295836.png)]

解决方法：修改babel的配置文件

{
    "presets": [
      [ "env",
        { "modules": false }
      ]
    ],
    "plugins": ["transform-remove-strict-mode"],
    "compact": false//关键的地方在于babel-loader的compact参数设置，因为默认的compact值为'auto'。
}

另附webpack的解决方法（并未测试过）

//在使用webpack的babel-loader编译es6的js文件时，出现了如题的提示。
//解决方法如下：
loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]
//或者：
{test: /\.js$/, loaders: 'babel?compact=false'}
//注意：关键的地方在于babel-loader的compact参数设置，因为默认的compact值为'auto'。