在搭建 es6 开发环境之前,先简单介绍一下 es6。
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
我们为什么要使用 es6?es6 有什么优点?......,我会在后面写一个 es6 专题系列,来介绍 es6 的使用。本次分享的内容是 es6 的开发环境搭建。
那么,你肯定又要问,问什么要搭建 es 的开发环境,上面不都说 es6 是 JavaScript 语言的下一代标准了嘛,我们平时写的 js 都不需要搭建环境,直接在浏览器里就能运行。
因为至今各大浏览器厂商所开发的 JavaScript 引擎都还没有完成对 ES2015 中所有特性的完美支持,如果直接使用的话,会报错的。
所以我们既想使用 es6 带来的新语法、新特性,又想让现在的浏览器支持 es6 语法,于是乎像 babel、Traceur 等编译器便出现了。它们能将尚未得到支持的 ES2015 特性转换为 ES5 标准的代码,使其得到浏览器的支持。
这里我们就使用 Babel 把 ES6 编译成 ES5。
先建立一个项目的工程目录,并在目录下边建立两个文件夹:src 和 dist
文件夹建立好后,我们新建一个 index.html 文件。
- Hello ECMA Script 6
需要注意的是在引入 js 文件时,引入的是 dist 目录下的文件。
- <script src="./dist/index.js">
- </script>
在 src 目录下,新建 index.js 文件。这个文件很简单,我们只作一个 a 变量的声明,并用 console.log() 打印出来。
- let a=1;
- console.log(a);
我们用了 let 声明,这里 let 是 ES6 的一种声明方式,接下来我们需要把这个 ES6 的语法文件自动编程成 ES5 的语法文件。
在安装 Babel 之前,需要用 npm init 先初始化我们的项目。打开终端或者通过 cmd 打开命令行工具,进入项目目录,输入下边的命令:
- npm init -y
-y 代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产 package.json 文件。
- {
- "name": "es6",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "keywords": [],
- "author": "",
- "license": "ISC"
- }
可以根据自己的需要进行修改,比如我们修改 name 的值。
在终端中输入以下命令, 如果你安装很慢的话,可以使用淘宝镜像的 cnpm 来进行安装。安装 cnpm 的方法,大家自己百度吧。
- cnpm install -g babel-cli
虽然已经安装了 babel-cli,只是这样还不能成功进行转换,如果你不相信可以输入下边的命令试一下。
- babel src/index.js -o dist/index.js
你会发现,在 dist 目录下确实生产了 index.js 文件,但是文件并没有变化,还是使用了 ES6 的语法。因为我们还需要安装转换包才能成功转换,继续往下看吧。
- cnpm install --save-dev babel-preset-es2015 babel-cli
安装完成后,我们可以看一下我们的 package.json 文件,已经多了 devDependencies 选项。
- "devDependencies": {
- "babel-cli": "^6.24.1",
- "babel-preset-es2015": "^6.24.1"
- }
在根目录下新建. babelrc 文件 (注意,以点开头的文件是隐藏文件,需要在 linux 环境通过命令创建),并打开录入下面的代码
- {
- "presets":[
- "es2015"
- ],
- "plugins":[]
- }
这个文件我们建立完成后,现在可以在终端输入的转换命令了,这次 ES6 成功转化为 ES5 的语法。
- babel src/index.js -o dist/index.js
在学习 vue 的时候,可以使用 npm run build 直接利用 webpack 进行打包,在这里也希望利用这种方式完成转换。打开 package.json 文件,把文件修改成下面的样子。
- {
- "name": "es6",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "build": "babel src/index.js -o dist/index.js"
- },
- "keywords": [],
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "babel-cli": "^6.24.1",
- "babel-preset-es2015": "^6.24.1"
- }
- }
修改好后,以后我们就可以使用 npm run build 来进行转换了。
这样,一个简单的基本的编译环境就 OK 了。
来源: http://www.cnblogs.com/zhouyangla/p/7076292.html