Babel的安装和使用

1. 安装Node.JS 和 npm

安装Node.JS 和 npm,如未安装可参照其他文章

2. 创建package.json文件

执行以下命令创建一个package.json
npm init (回车, 一直下一步即可)

3. 安装 Babel

npm install --save-dev babel-cli
// 测试是否安装成功
./node_modules/.bin/babel --help 查看帮助

4. 安装ECMAScript6/2015 (ES6/ES2015)转换规则

npm install --save-dev babel-preset-latest
// 在项目根目录创建 .babelrc 配置文件
{
  "presets": ["latest"]
  //或者,二选一
  "presets": ["es2015"]
}

5. Babel转换示例

新建一个main.js文件，并在 main.js 内写入以下es6的代码：
var fn = (a,b) => a + b;

// 在终端中执行
./node_modules/.bin/babel main.js(编译的文件)

// 执行完成可以在终端看到转换后的代码

6. 使用Babel在浏览器中运行ES6代码

从Babel 6.0开始, 不再直接提供浏览器版本, 而是要用构建工具构建出来. 如果你没有或不想使用构建工具, 可以通过安装5.x版本的babel-core 模块获取：

1. 安装5.x版本的babel-core
npm install babel-core@5

2. 新建一个html文件, 如index.html，引入必要的文件：
<script src="./node_modules/babel-core/browser.js" type="text/javascript"></script>
<script src="./node_modules/babel-core/browser-polyfill.js" type="text/javascript"></script>

3. 引入ES6代码文件
注意: browser.js 是 Babel 提供的转换器脚本, 在引入我们编写的es6的文件时, script 标签的 type 需要是 "text/babel"
<script type="text/babel" src="./main.js"></script>

4. 使用browser-sync在浏览器中查看效果
browser-sync start --server

7. 解决可能的问题

1. 错误提示：-bash: browser-sync: command not found
解决方案：加载browser-sync模块
npm install -g browser-sync

2. 错误提示：Cross origin requests are only supported for protocol schemes...
解决方案：
( 需要替换路径中的yourname )
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/yourname

8. 配置Babel打包命令

在package.js中添加以下内容，然后使用npm run build进行打包：
"scripts": {
    "build": "babel js.js --out-file bunder.js"
},

9. 另一种Babel安装和打包方法

1. 在本地文件中执行npm init创建package.json
npm init

2. 安装必要的模块
npm install babel-cli --save-dev
npm install babel-preset-es2015 --save-dev

3. 在项目根目录创建 .babelrc 配置文件，并添加以下内容：
{
  "plugins": [],
  "presets": ["latest"]
  //或者,二选一
  "presets": ["es2015"]
}

4. 在package.js中添加以下内容，然后使用npm run build进行打包：
"scripts": {
    "build": "babel js.js --out-file bunder.js"
}