20191015_1513Gulp+Babel搭建ES6环境
项目结构目录:
tree -I "node_modules"
.
|-- gulpfile.js
|-- index.html
|-- package-lock.json
|-- package.json
`-- src
`-- js
`-- test.js
npm i babel-core babel-preset-env gulp-babel@7 gulp@3 -D
// package.json
{
"name": "gulp2es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1"
}
}
// .babelrc 必须要添加,不然无法转换成ES5
{
"presets": ["env"]
}
// test.js
let arr = [1, 2, 3, 4, 5];
arr.forEach((res) => {
console.log(res);
});
// gulpfile.js
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(babel())
.pipe(gulp.dest('dist/js'))
})
gulp.task('default', ['js']);
运行gulp命令后,生成dist目录,该子目录js目录下test.js
"use strict";
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (res) {
console.log(res);
});
github地址:https://github.com/linfeimy/csdnblogdemo/tree/master/build-tools/gulp2es6