es6开发环境搭建（gulp实时转码）

1.创建项目文件夹（test）、package.json文件

md test

npm init

2.安装gulp

npm install --save-dev gulp

3.安装babel-core、转码规则及其他gulp工具。

npm install --save-dev babel-core babel-preset-es2015gulp-babel gulp-watch

4.项目文件夹(test)下创建.babelrc，填入以下内容：

{"presets": ["es2015"],"plugins": [] }  

5.项目文件夹(test)下创建gulpfile.js，编辑内容如下：

var gulp = require("gulp"),
babel = require("gulp-babel"),
watch = require("gulp-watch");
var config = {
es6file: 'src/*.js',
es5file: 'dist'
}
gulp.task("babeljs", function() {
return gulp.src(config.es6file)
.pipe(babel())
.pipe(gulp.dest(config.es5file));
});
gulp.task("watch", function() {
gulp.watch(config.es6file, ['babeljs']);
})
gulp.task('default', ['watch', 'babeljs']);

6.示例：

项目文件夹(test)下创建src文件夹、dist文件夹。

src文件夹下创建test.js,并编辑内容如下：

let [foo, [[bar], baz]] = ['i', [['am'], 'xiaoming']];  
console.log(foo);  
console.log(bar);  
console.log(baz); 

7.配置完成，运行实现转码：

gulp

8. 友情提示：

1.,最后你会在dist文件夹下找到test.js;

2.创建html然后引用这个文件，开始你愉快的编码之旅吧！

3.“Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。”--阮一峰。

网上流行的做法相信你已经知道了，原理你应该明白，就是在转义完成的js前引用babel-polyfill，如果浏览器没有这些新的API，就定义一个。