使用 ES6 进行开发
2016-01-30 20:31
483 查看
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
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。命令:
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开发之旅吧
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- React and React with ES6
- fetch 设置 HTTP 注意事项
- Redux系列02:一个炒鸡简单的react+redux例子