20191015_1513Gulp+Babel搭建ES6环境

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