前言:
1.es6 的简单介绍:
ECMAScript 6.0(以下简称 ES6) 是 JavaScript 语言的下一代标准, 已经在 2015 年 6 月正式发布了. 它的目标, 是使得 JavaScript 语言可以用来编写复杂的大型应用程序, 成为企业级开发语言.
2. 为什么要搭建 ES6 的开发环境?
因为至今各大浏览器厂商所开发的 JavaScript 引擎都还没有完成对 ES2015 中所有特性的完美支持, 如果直接使用的话, 会报错的. 所以我们既想使用 es6 带来的新语法, 新特性, 又想让现在的浏览器支持 es6 语法, 于是乎像 http://babeljs.io/ 等编译器便出现了. 它能将尚未得到支持的 ES2015 特性转换为 ES5 标准的代码, 使其得到浏览器的支持.
所以使用 Babel 的目的便是把 ES6 编译成 ES5.
建立工程目录:
先建立一个项目的工程目录, 并在目录下边建立两个文件夹: src 和 dist
src: 书写 ES6 代码的文件夹, 写的 JS 程序都放在这里.
dist: 利用 Babel 编译成的 ES5 代码的文件夹, 在 html 页面需要引入的时这里的 JS 文件.
编写 index.HTML:
在根目录下面新建一个 index.HTML 文件
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <title>
- index
- </title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <script src="./dist/index.js">
- </script>
- </head>
- <body>
- Hello ECMA Script 6
- </body>
- </HTML>
此时引入到 index.HTML 文件中的 index.JS 是 dist 目录的文件 (转化后的文件)
编写 index.JS
在 src 目录下, 新建 index.JS 文件, 相关代码如下:
- let a="es6";
- console.log(a);
- View Code
我们用了 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"
- }
可以根据自己的需要进行修改.
全局安装 Babel-cli-- 命令行使用需要
在终端中输入以下命令, 如果你安装很慢的话, 可以使用淘宝镜像的 cnpm 来进行安装. 点击查看关于 cnpm 的安装方法 http://npm.taobao.org/
NPM install -g babel-cli
这里安装可能会出现错误, 这是由于 Windows 系统下的权限错误造成的.
解决方法: 使用 win+x, 选择命令提示符 (管理员), 在里面运行命令就好了.
安装 babel-cli 后, 我们执行指令
babel src/index.JS -o dist/index.JS
我们虽然安装了 babel-cli, 也在 dist 目录下生产了 index.JS 文件, 但是还是没有转化, 任然是 ES6 的语法, 我们还需要完成以下几步才能实现转换
(1) 本地安装 babel-preset-es2015 和 babel-cli-- 本地项目所需
NPM install --save-dev babel-preset-es2015 babel-cli
安装完成后, 我们可以看一下我们的 package.JSON 文件, 已经多了 devDependencies 选项.
(2) 新建. babelrc
在根目录下新建. babelrc 文件, 并在文件中加入如下代码
- {
- "presets":[
- "es2015"
- ],
- "plugins":[]
- }
这个文件我们建立完成后, 现在可以在终端输入的转换命令了, 这次 ES6 成功转化为 ES5 的语法.
babel src/index.JS -o dist/index.JS
结果为:
我们可能会发现转换命令过长, 难以记忆, 我们可以将命令配置到 package.JSON, 如下
"change": "babel src/index.js -o dist/index.js"
然后可以使用如下命令代替上述的长转换命令.
NPM run change
这样, 一个简单的基本的编译环境就 OK 了.
来源: http://www.bubuko.com/infodetail-2868680.html