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,就定义一个。