安装node环境
地址：https://nodejs.org/en/download/
建立项目目录
建立一个项目目录es6-demo，并在目录下建立两个子文件夹src和dist；
- src：源代码es6的目录
- dist：编译后es6的目录
初始化项目
使用下面命令初始化项目，在项目目录下生成package.json文件：
npm init
//或者
npm init -y
两者区别在于，前者是分步确认生成的信息，后者是默认确认生成的信息；
全局安装babel-cli
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行；Babel提供了babel-cli工具，用于命令行转码；
npm install babel-cli -g
基本用法：
# 转码结果输出到标准输出
$ 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
建立.babelrc
在项目根目录下，创建.babelrc，.babelrc是Babel的配置文件；该文件是用来设置转码规则和插件的，基本格式如下：
{
"presets":[],//转码规则
"plugins":[]// 转码插件
}
安装转码规则
在本地安装转码规则模块babel-preset-es2015:
npm install --save-dev babel-preset-es2015
然后，将规则加入.babelrc文件当中：
{
"presets":[
"es2015"
],
"plugins":[]
}
编译基本代码
在项目根目录下建立index.html文件
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello es6</title>
<script src="./dist/index.js"></script>
</head>
<body>
Hello es6
</body>
</html>
引入js文件，是编译后的js文件，即dist目录下的文件；
在src文件下创建即将要编写的index.js文件
/src/index.js
let a = 1;
let b = 1;
console.log(a + b);
这里用的let是es6的一种声明方式，接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件。
首先，我们使用babel命令行来编译：
babel src/index.js -o dist/index.js
这样就可以，看见在dist目录下生成一个index.js文件：
"use strict";
var a = 1;
var b = 1;
console.log(a + b);
编译成功。
使用babel命令行，一大长串，很容易忘记什么，所以，我们可以改造package.json，来使用更容易记住的命令来编译:
"scripts": {
"build": "babel src/index.js -o dist/index.js"
}
在"scripts"模块下，添加上面的命令行，然后使用命令：
npm run build
就可以直接编译了；
参考：
- 阮一峰的es6入门http://es6.ruanyifeng.com
网友评论