使用ES6开发流程

开始

ES6有很多新特性让人忍不住想去尝试，然而各种浏览器的支持程度还不足以让我们直接在浏览器上执行ES6的代码，好在babel可以帮助我们将ES6代码转码成ES5，再利用bowserify的帮助，我们就可以尽情体验ES6带来的愉悦了。P.S. 构建工具使用的是gulp。

目的

制定一个流程之前还是先得想好我们想让这个流程是一个什么样子。

首先，开发代码和部署代码是分开的，比如我们在 /app 目录下开发，然后通过gulp构建之后，代码将存放在 /dist 目录下。也就是说打开 /dist 目录下的文件，是可以直接在浏览器上运行的。

那么我们可以约定这个流程如下：

1. 开发

在app目录下开发，这时 /js 目录下是ES6的代码。

/app  -- /js  ---- app.js  ---- util.js  -- /css  ---- base.css  ---- app.css  /dist  -- /js  -- /css  -- index.html

2. 构建

使用gulp将js转码成ES5并压缩，将css合并并压缩。

/app  -- /js  ---- app.js  ---- util.js  -- /css  ---- base.css  ---- app.css  /dist  -- /js  ---- app.js // 已经转码成了ES5  ---- util.js // 已经转码成了ES5  -- /css  ---- all.min.css // base.css + app.css 合并、压缩并重命名的文件  -- index.html

3. 使用 bowserify

如果我们使用了ES6中的 module，通过 import 、 export 进行模块化开发，那么通过babel转码后， import 、 export 将被转码成符合CMD规范的 require 和 exports 等，但是浏览器还是不认识，这时可以使用 bowserify 对代码再次进行构建。产生文件为 bundle.js

/app  -- /js  ---- app.js  ---- util.js  -- /css  ---- base.css  ---- app.css  /dist  -- /js  ---- app.js // 已经转码成了ES5  ---- util.js // 已经转码成了ES5  ---- bundle.js // 实际引用的js文件  -- /css  ---- all.min.css // base.css + app.css 合并、压缩并重命名的文件  -- index.html

所以一开始 index.html 中引用的js文件和css文件就是 bundle.js 和 all.min.css

确定好流程后，就开始搭建开发环境吧。

一、新建项目

项目结构如下：

/app  -- /js  -- /css  /dist  -- /js  -- /css  -- index.html

我们的代码在 /app 目录下开发，转码、合并、压缩完之后保存在 /dist 下。

二、配置环境

1） 初始化 npm

首先进入根目录，初始化项目

$ npm init

2） 安装 gulp

$ npm install gulp --save-dev

3） 安装 gulp-babel

命令：

npm install --save-dev gulp-babel babel-preset-es2015

其中babel -preset-es2015 是ES2015转码规则，如果代码中含有es7的内容，可以继续安装ES7不同阶段语法提案的转码规则

# ES2015转码规则  $ npm install --save-dev babel-preset-es2015    # react转码规则  $ npm install --save-dev babel-preset-react    # ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个  $ npm install --save-dev babel-preset-stage-0  $ npm install --save-dev babel-preset-stage-1  $ npm install --save-dev babel-preset-stage-2  $ npm install --save-dev babel-preset-stage-3

4） 安装其他gulp工具

以下是根据流程所需要安装的全部工具

$ npm install gulp-rename gulp-concat gulp-uglify gulp-minify-css browserify vinyl-source-stream --save-dev

• gulp-rename重命名文件

• gulp-concat合并文件

• gulp-uglify压缩js文件

• gulp-minify-css压缩css文件

• browserify让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码

• vinyl-source-stream将Browserify的bundle()的输出转换为Gulp可用的vinyl（一种虚拟文件格式）流

至此环境已经搭建好了。接下来我们需要配置gulp，让我们的工作更有效率。

三、配置 gulp

打开 gulpfile.js ，编辑代码如下

const gulp = require('gulp');  const babel = require('gulp-babel');  const uglify = require('gulp-uglify');  const rename = require('gulp-rename');  const minifyCss = require('gulp-minify-css');  const concat = require('gulp-concat');  const browserify = require('browserify');  const source = require('vinyl-source-stream');    // 编译并压缩js  gulp.task('convertJS', function(){    return gulp.src('app/js/*.js')      .pipe(babel({        presets: ['es2015']      }))      .pipe(uglify())      .pipe(gulp.dest('dist/js'))  })    // 合并并压缩css  gulp.task('convertCSS', function(){    return gulp.src('app/css/*.css')      .pipe(concat('app.css'))      .pipe(minifyCss({compatibility: 'ie8'}))      .pipe(rename(function(path){        path.basename += '.min';      }))      .pipe(gulp.dest('dist/css'));  })    // 监视文件变化，自动执行任务  gulp.task('watch', function(){    gulp.watch('app/css/*.css', ['convertCSS']);    gulp.watch('app/js/*.js', ['convertJS', 'browserify']);    gulp.watch('dist/*.html', ['convertJS']);  })    // browserify  gulp.task("browserify", function () {      var b = browserify({          entries: "dist/js/app.js"      });        return b.bundle()          .pipe(source("bundle.js"))          .pipe(gulp.dest("dist/js"));  });    gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

通过 watch ，我们可以在保存完代码之后，让gulp自动帮我们将代码构建一遍，而不用自己再敲一遍命令。

开始 gulp

$ gulp start

现在就开始ES6开发之旅吧

</div>