最近在公司的一个老项目是起一个特性的时候发现没有不用ES6写前端代码贼蛋疼,于是决定在项目中引入ES6。因为公司原来使用gulp 搭建的开发环境,因此这里总结下gulp环境下引入babel的方法。
首先安装4个gulp插件:
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install babel-core --save-dev
npm install gulp-babel --save-dev
npm install gulp-remove-use-strict //这个是用于去掉严格模式用的,不要用的话可以不安装
然后在gulpfile.js文件中加入以下代码:
//es6转es5 去除严格模式
gulp.task('babel',function(){
gulp.src(['app/js/views/**.js'])
.pipe(babel({
presets: ['@babel/env', {
"sourceType": "script"
}],
"plugins": [
"transform-remove-strict-mode"
]
}))
.pipe(removeUseStrict())
.pipe(gulp.dest('./app/js/viewsdist'))
});
//es6转es5 严格模式
gulp.task('babel',function(){
gulp.src(['app/js/views/**.js'])
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('./app/js/viewsdist'))
});
其中,src后面的数组跟着的是ES6文件存放的路径,gulp.dest后面跟着的是输出路径。
然后在命令行中输入 gulp babel即可在输出目录看到结果。
要吐槽的是照着gulp-remove-use-strict这个插件的官网例子打一遍既然没效果,折腾了我半天时间!!!