最近在做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结合到一起，表现的一致)
- 具体配置书写方式如下
- 自动转码
{
"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())
});
- 执行
gulp命令就好了
- 执行
持续更新实用的干货
简书关注coderYJ
微博关注coderYJ
微信公众号关注coderYJ
