原文链接:《es6初探——编译环境搭建》地址:http://www.cnblogs.com/lovelyun/p/5539587.html
今天想要搭建一个es的开发环境,于是在网上找了一篇文章,但是上面博文的文章有些错误(书写或者是作者简略掉了),下面是我按照这篇文章搭建项目并且做的一些修改。
首先我们先搭建es6的开发环境:
第一步:新建一个空文件夹并执行npm init创建package.json文件
npm init
第二步:项目目录下安装babel-cli和babel-preset-es2015
npm install babel-cli --save-dev
npm install babel-preset-es2015 --save-dev
第三步:配置编译规则
在根目录下新建文件.babelrc,并进行配置
{
"presets": [
"es2015"
],
"plugins": []
}
第四步:去创建一个测试文件
input.map(item => item + 1);
第五步:在package中添加如下代码
"scripts": {
"babel": "babel src/es6Test.js -o src/es.js"
},
第六步:运行npm run babel
npm run babel
这个时候你就会发现src目录下新生成了一个es.js文件,内容为
到现在es6的编译环境就已经搭建完毕
接下来我们说说搭建glup+es6开发环境
第一步:安装gulp和gulp-babel和gulp-load-plugins
npm install gulp --save-dev
npm install gulp-babel --save-dev
npm install gulp-load-plugins --save-dev
第二步:新建gulpfile.js文件并配置
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
gulp.task('babel', () => {
return gulp.src('src/*.js')
.pipe($.babel({
presets: ['es2015']
}))
.pipe(gulp.dest('public'));
});
第三步:运行
gulp babel
这个时候你就会发现es6Test.js文件已经编译成功,而且已经导出到public文件夹里,而且内容与上述直接babel的完全一样