手把手教你搭建ES6的开发运行环境


Posted in Javascript onJuly 11, 2017

前言

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

其实当ES5还没有完全普及时,ES6就接踵而来了,在发布之后的将近一年内,很多小伙伴都踊跃的学习这门新的语言,之所以说是一门新的语言,是因为跟ES5相比,语法方面变化确实有点大,可以说新的JavaScript语法看上去有种脱胎换骨的感觉。博主也曾跃跃欲试,看了很多语法方面的教程,可是无奈浏览器还未完全支持ES6的规范,只看不练,有种眼高手低的感觉,相信朋友们也会有同样的心情,那么怎样可以愉快的写ES6代码,进而将学到的东西转化成实践呢,别担心,今天我们就来学习ES6构建方面的知识,并搭建一个简单的学习环境。 下面话不多说了,来一起看看详细的介绍。

首先需要介绍一个ES6开发利器:Babel。

Babel是一个编译器,负责将源代码转换成指定的语法的目标代码,可以使之很好的在运行环境中执行我们的代码。下面我们就来详细介绍这个神器,利用它来编译我们的ES6代码。

Babel给我们提供了一个很方便的命令行工具:babel-cli,利用它我们可以在命令行中执行编译命令,我们只需使用npm来安装它即可:

npm install -g babel-cli

除此之外,我们还需要安装转码规则包,Babel支持很多语法的转码,比如我们想要将ES6转换成ES5,那么需要安装babel-preset-es2015包,如果我们想要编译React源码,就需要安装babel-preset-react,这里我们需要安装babel-preset-es2015。为此我们创建一个babel-test目录,在这个目录里我们创建两个目录,es6和js,分别用于放置ES6源代码和编译后的ES5目标代码,然后我们使用“npm init ?yes”命令生成一个默认的package.json文件,babel-test目录结构如下图所示: 

手把手教你搭建ES6的开发运行环境 

然后在当前目录执行下面这行命令安装ES6转码规则包:

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

在es6目录中我们创建了一个test.es6文件用于写入ES6源代码,Babel编译源文件时没有过多的限制,所以我们也可以选择使用js或es作为文件后缀名。现在我们将下面这段ES6代码写入到test.es6中:

let name = 'Scott';
let greeting = `hello ${name}`;
console.log(greeting);

接下来我们就可以来运行babel的命令编译我们的ES6源代码了:

babel es6/test.es6 --out-file js/test.js --presets es2015

这行命令的含义是:编译es6下面的test.es6文件,输出文件为js下面的test.js,同时指定编译规则包为es2015。命令执行完成后,我们会在js目录中找到一个test.js文件,如图所示: 

手把手教你搭建ES6的开发运行环境 

看以看到,上面的ES6语法已经被编译成ES5的语法了,这个文件就可以被加载到现有的运行环境执行了。另外,如果我们也可以编译整个目录的源文件,只需指定“?out-dir”参数即可:

babel es6 --out-dir js --presets es2015

这行命令的作用是对整个es6目录中的文件进行编译,编译结果输出到js目录,如下图所示: 

手把手教你搭建ES6的开发运行环境 

到目前为止,我们仍手动执行babel命令编译源代码,并且我们使用了全局的babel-cli库,这显然不是最好的解决方案。如果我们checkout出一个项目,必须要先在全局安装babel-cli库才能运行,我们不希望有这样的依赖。另外不同的项目依赖库的版本可能都不同,全局的babel-cli库也不能保证兼容各个项目中其他依赖库的版本。除此之外,每次手动运行编译命令也太繁琐了,我们希望将babel-cli库安装到本地,并且使用一个简单的命令执行编译任务。

首先我们需要在本地安装babel-cli库:

npm install babel-cli --save-dev

现在我们可以卸载全局的babel-cli库了:

npm uninstall -g babel-cli

最后,我们需要在package.json里面修改一下scripts:

"scripts": {
 "compile": "babel es6 --out-dir js --presets es2015"
}

修改完成之后,我们就可以使用npm来运行这个编译任务了,只需下面一条简单的指令即可:

npm run compile

上面只是利用babel将ES6源代码编译成JS,在开发中,我们还需要考虑更多东西,比如模块化开发、自动编译和构建等等。接下来,我们就搭建一个简单的ES6开发环境,来支持ES6学习阶段的开发。

首先,我们创建一个简单的应用,它包含一个index.html和es6目录,es6目录中又包含hello.es6和main.es6两个文件,在构建完成后,会多出js和bundle两个目录,分别放置编译后的JS代码和打包后的bundle文件: 

手把手教你搭建ES6的开发运行环境 

其中,hello.es6定义了greet函数,而main.es6是入口文件,下面是相关的代码:

//hello.es6

function greet(name) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('hello ' + name);
 }, 1000);
 });
}

exports.greet = greet;
//main.es6

import "babel-polyfill";

import {greet} from './hello';

greet('Scott').then((greeting) => {
 document.getElementById('container').innerHTML += greeting;
});

document.getElementById('container').innerHTML = 'I am greeting: ';

可以看到,hello.es6中使用了ES6的箭头函数和Promise来定义一个greet函数,模拟1秒后返回一个hello开头的字符串,而main.es6中引入了hello.es6并调用了greet函数,最后将结果刷新到DOM元素中。

要使这两个源代码文件生效,首先需要把它们编译成JS,然后再将JS文件打包,现在我们就来使用gulp的方式构建这个过程。

要完成这个任务,我们需要先安装相关的依赖包:

"devDependencies": {
 "babel-polyfill": "^6.9.1",
 "babel-preset-es2015": "^6.6.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-sync": "^0.1.4",
 "gulp-uglify": "^1.5.3"
}

其中,babel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类我们还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等新增的类,但为了兼容旧版本的浏览器,这里还是安装比较好。

然后,我们就创建几个简单的tasks,下面是gulpfile.js的代码:

var gulp = require('gulp');
var babel = require('gulp-babel');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gulpsync = require('gulp-sync')(gulp);

gulp.task('compile-es6', function() {
 return gulp.src('app/es6/*')
 .pipe(babel({
 presets: ['es2015']
 }))
 .pipe(gulp.dest('app/js'));
});

gulp.task('pack-js', function() {
 return gulp.src('app/js/main.js')
 .pipe(browserify())
 .pipe(rename('bundle.js'))
 .pipe(gulp.dest('app/bundle'));
});

gulp.task('compress-bundle', function() {
 return gulp.src('app/bundle/bundle.js')
 .pipe(uglify())
 .pipe(rename('bundle.min.js'))
 .pipe(gulp.dest('app/bundle'));
});

//build source files to released bundle file
gulp.task('build', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']), function() {
 if (process.argv.pop() == '--dev') {
 //watch any change and then re-run the tasks
 gulp.watch('app/es6/*', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']));
 }
});

//run a server listening at port 8000
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8000,
 livereload: true
 });
});

最后,只需在命令行中执行两个命令就可以了:

gulp build --dev
gulp server

第一个命令我们是指定了开发模式,开发模式会监听es6目录中的文件改动,并重新构建;而第二个命令是用来启动一个服务,在8000端口监听。

上面的项目已放到Github上,感兴趣的同学可以去看一下,也可以克隆到本地亲自试一试。

github地址:https://github.com/scottliu2011/es6-dev

本地下载地址:http://xiazai.3water.com/201707/yuanma/es6-dev(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 #Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 #Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 #Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 #Javascript
使用jQuery实现动态添加小广告
Jul 11 #jQuery
Vue中父组件向子组件通信的方法
Jul 11 #Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 #Javascript
You might like
PHP session会话的安全性分析
2011/09/08 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
培训协议书范本
2014/04/22 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS