古语有云:“君子生非异也,善假于物;工欲善其事,必先利其器。”
由于有些低版本的浏览器还是不支持ES6语法,学习ES6,首先要学会搭建一个基本的ES6开发环境,利用工具,把ES6的语法转变成ES5的语法。
1、使用Babel把ES6编译成ES5
1.1 建立工程目录
先建立一个项目的工程目录,并在目录下边建立两个文件夹:dist 和 src
1.2 初始化项目
在安装Babel之前,需使用npm init先初始化我们的项目。通过cmd打开命令行工具,进入项目目录,输入下边的命令:
npm init -y
命令执行完成后,会在项目根目录下生产package.json文件。
1.3 全局安装Babel-cli
npm install -g babel-cli
1.4 本地安装转码规则
npm install --save-dev babel-preset-es2015 babel-cli
安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。
1.5 新建.babelrc
在根目录下新建.babelrc文件,.babelrc是Babel的配置文件。
该文件是用来设置转码规则和插件的,基本格式如下:
{ "presets":["es2015"], "plugins":[]}
1.6 babel基本用法
# 转码结果输出到标准输出$ babel example.js# 转码结果写入一个文件 (--out-file 或 -o 参数指定输出文件)$ babel example.js --out-file compiled.js或者$ babel example.js -o compiled.js# 整个目录转码 (--out-dir 或 -d 参数指定输出目录)$ babel src --out-dir lib或者$ babel src -d lib# -s 参数生成source map文件$ babel src -d lib -s
在src目录下,新建index.js文件,使用ES6中的 let声明和字符串模板
let name = 'Bread and Dream';let greeting = `hello ${name}`;
在命令行输入
babel src/index.js -o dist/index.js
这时dist目录会生成 index.js 文件,输出结果为:
'use strict';var name = 'Bread and Dream';var greeting = 'hello ' + name;
项目文件最终结构
1.7 简化转化命令:
使用babel命令行,一大长串,很容易忘记,所以,我们可以进行改造,打开package.json文件,添加以下代码
{ "scripts": { "build": "babel src/index.js -o dist/index.js" },}
修改好后,以后我们就可以在命令行输入 npm run build 进行转换了。
(注:build是自定义的,为了语义化命名为build,当然也可以命名成其他的,例如 compile)
2、webpack + Babel 构建 ES6 开发平台
2.1 搭建 webpack 基本文件目录
- 首先全局安装webpack(这里使用 webpack@3.12.0 版本)
npm install -g webpack@3
- 新建一个文件夹,命名为 webpack_demo;
- 命令行切换到 webpack_demo的文件目录下,执行下面的命令, 生成默认 package.json 配置文件
npm init -y
- 利用 npm 安装 webpack
npm i --save-dev webpack@3
-
新建 webpack.config.js(用于配置 webpack 的运行方式),最简单的配置如下:
module.exports= {
/* webpack 入口起点 */entry:'./index.js',/* webpack 输出 */output:{ // 输出 文件名 filename:'./test.js'},
}
2.2 安装babel相关
- 安装 babel-core 包npm i --save-dev babel-core
- 安装babel-preset-env 和 babel-preset-stage-0 包npm i --save-dev babel-preset-env babel-preset-stage-0 babel-preset-env 是一个主流的 Babel 插件数组;Stage-X 是实验阶段的 Presets
2.3 将 webpack 和 Babel 结合在一起
-
需要在两者之间建立一条纽带,而通过 webpack 的 loaders 就可以生成这条纽带,因此要修改 webpack.config.js 配置文件:
/ webpack loaders 配置 /
module:{rules:[ { test:/\.js$/, use:{ loader:'babel-loader', }, } ],
},
就是针对以 .js 结尾的文件使用 babel-loader。由于项目中还不存在 babel-loader,所以要先安装该模块:
npm i --save-dev babel-loader
- 通过使用 loader 语法配置 Babel 的 presets
使用 webpack 提供的方法,具体在 webpack.config.js 的 module.rules.use.options 中配置
/* webpack loaders 配置 */ module:{ rules:[ { test:/\.js$/, use:{ loader:'babel-loader', options:{ presets:[ 'babel-preset-env', 'babel-preset-stage-0' ] } }, } ], },
最终的项目结构为:
在当前目录下执行 webpack 命令
webpack
输入文件 index.js 中的ES6代码已经被转换成输出文件 test.js 中的 ES5 代码了:
3、Traceur转码器
Google公司的Traceur转码器,也可以将ES6代码转为ES5代码。
3.1 直接在页面中使用:
写ES6代码,用:
注意:script标签的type属性的值是module,而不是text/javascript。这是Traceur编译器识别ES6代码的标识。
3.2 Traceur的命令行转换方法:
首先需要用npm安装。
$ npm install -g traceur
直接运行ES6代码,以index.js为例
$ traceur index.js
将ES6输出为ES5脚本
$ traceur --script index.js --out es5.js
为了防止有些特性编译不成功,最好加上–experimental选项。
$ traceur --script index.js --out es5.js --experimental
4、直接在线编译
Babel提供一个REPL在线编译器,可以在线将ES6代码转为ES5代码。
转换后的代码,可以直接作为ES5代码插入网页运行。
5、总结
使用babel搭建环境的顺序:
- 创建项目创建两个文件夹src和dist
- 使用npm init 初始化项目生成package.json(项目信息文件)
- 使用 npm install -g babel-cli 全局安装
- 使用 npm install –save-dev babel-preset-es2015 babel-cli本地安装
- 创建.babelrc文件(babel转换的配置文件)
- 在src下创建js,编写ES6语法
- babel src/index.js -o dist/index.js转码生成ES5语法
babel 本质就是一个 JavaScript 编译器,通过:
- 将 JavaScript 源代码解析成抽象语法树(AST);
- 将源代码的 AST 结果一系列转换生成目标代码的 AST;
- 将目标代码的 AST 转换成 JavaScript 代码。
当然,感兴趣的小伙伴可以深入研究下babel及其插件的源码,了解其运行机制,以便更全面的掌握ES6转ES5的相关原理、机制。