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

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学习阶段的开发。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyfygj.html