多语言展示
当前在线:1030今日阅读:126今日分享:42

搭建ES6开发运行环境

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

JavaScript

方法/步骤
1

首先介绍一个ES6开发利器:Babel。 Babel是一个编译器,负责将源代码转换成指定的语法的目标代码,可以使之很好的在运行环境中执行代码。下利用它来编译ES6代码。 Babel提供了一个很方便的命令行工具:babel-cli,利用它可以在命令行中执行编译命令,只需使用npm来安装它即可:

2

需要安装转码规则包,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目录结构如下图所示:

3

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

4

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

5

可以来运行babel的命令编译ES6源代码了:

6

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

7

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

8

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

9

手动执行babel命令编译源代码,使用了全局的babel-cli库,如果checkout出一个项目,必须要先在全局安装babel-cli库才能运行,不希望有这样的依赖。另外不同的项目依赖库的版本可能都不同,全局的babel-cli库也不能保证兼容各个项目中其他依赖库的版本。每次手动运行编译命令也太繁琐了,将babel-cli库安装到本地,并且使用一个简单的命令执行编译任务。 首先需要在本地安装babel-cli库:

10

上面只是利用babel将ES6源代码编译成JS,还需要考虑更多东西,比如模块化开发、自动编译和构建等等。接下来,搭建一个简单的ES6开发环境,来支持ES6学习阶段的开发。 首先,创建一个简单的应用,它包含一个index.html和es6目录,es6目录中又包含hello.es6和main.es6两个文件,在构建完成后,会多出js和bundle两个目录,分别放置编译后的JS代码和打包后的bundle文件:

11

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

12

hello.es6中使用了ES6的箭头函数和Promise来定义一个greet函数,模拟1秒后返回一个hello开头的字符串,而main.es6中引入了hello.es6并调用了greet函数,最后将结果刷新到DOM元素中。 要使这两个源代码文件生效,首先需要把它们编译成JS,然后再将JS文件打包,现在我们就来使用gulp的方式构建这个过程。 要完成这个任务,需要先安装相关的依赖包:

13

abel-polyfill是ES6的补丁,由于babel只支持ES6语法部分的编译,对于新增的类还需要安装额外的polyfill,虽然现在Chrome和Firefox都已经添加了Promise等新增的类,但为了兼容旧版本的浏览器,这里还是安装比较好。 创建几个简单的tasks,下面是gulpfile.js的代码:

14

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

15

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

推荐信息