博客

最初的babel只是单纯的ES6转ES5工具，随着应用范围越来越广，最新的babel6已经变成了一个转译平台，ES6转ES5只是其中一个插件的功能。


在线体验babel5


一般的大型项目都是使用webpack配置babel，这里为了便于学习，只简单说下如何单独使用babel和可能遇到的坑。

安装方式

1. 进入项目目录，安装babel-cli (babel6 cli) 和 babel-preset-env（插件集合）。

npm install --save-dev babel-cli
npm install --save-dev babel-preset-env

此处的坑：

• 官方推荐将babel-cli安装在项目中，只在全局安装会导致项目对环境的依赖（当然项目里和全局都安装一遍也是可以的）
• babel6需要额外的转码插件才能实现转译，单独用babel-cli是无法转译的（与babel5不同）
• env只是JS语法转译插件，如果你需要使用ES6的API，必须另外安装babel-polyfill；如果你需要使用babel的API，必须另外安装babel-core；如果你需要转译JSX，需要另外安装babel-preset-react

建议：

• 项目内安装的babel无法在命令行使用babel命令（一般都是用package.json或webpack.conf.js来配置）。如果你想体验babel命令，可以在全局再次安装babel
• env是babel presets的一种，这里推荐使用env。它能
  
  针对特定的浏览器环境进行按需转码
  
  ，通过配置env的targets，babel会只编译那些目标环境还不支持的特性。

2.项目目录内新建名为“.babelrc”的文件，添加以下内容，指定要使用的presets，以及相关配置

{
  "presets": [
    ["env", {
      //如果不设置 targets 属性，babel-preset-env 和 babel-preset-latest 效果相同
      "targets": {
        //转码后支持chrome 52
        "chrome": 52,
        //转码后支持的浏览器：市场份额>1%, 最新2个版本，ie版本大于8
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

babel-preset-env的配置方法

此处的坑：

• windows7下无法右键新建”.babelrc”文件名，会报错“必须输入文件名”，可以使用sublime,webstorm等ide新建。
• 假如你使用了多个presets，请注意，presets是按照数组的index倒序(从数组最后一个到第一个)进行编译。所以请写成[“env”, “stage-2”]，而不是[“stage-2”, “env” ]。

3.在项目的package.json内添加一个script，配置babel命令

"scripts": {
//转译单个文件
"build": "babel script.js --out-file script-compiled.js"

//你也可以转译整个文件夹
//"build": "babel src --out-dir lib"

//你也可以转译单个文件并实时监控变化
//"build": "babel script.js --watch --out-file script-compiled.js"
}

//假如你在全局也安装了babel，可以不配置package.json，在命令行手动执行babel命令即可完成转码
//babel script.js --out-file script-compiled.js

如何使用babel-cli命令

4.执行build命令，生成转码文件

npm run build

到这里，我们便实现了babel的简单应用。

如果你想了解babel的更多用法，比如babel-core, babel-register，请参考

阮一峰的Babel入门教程

，和

babel官方文档

babel转换ES6是否有兼容性问题？

ES6的部分特性是无法用ES5的语法实现的，babel在转译这些内容时会直接跳过不转，或者直接报错。

使用babel时有哪些坑？

babel6 把 import 和 export 的转码逻辑都做了修改，转码后不再兼顾 commonJS。这对于那些同时使用commonJS模块语法和es6模块语法的同学来说, 简直就是巨坑。

1. 对export default {}的转码

如果希望对它的转码符合 commonJS，请安装 babel-plugin-add-module-exports插件,并在.babelrc 文件内声明该插件。

在 babel5 时代， export default {} 除了会被转译成 exports.default = {}，还会加一句 module.exports = exports.default，这是为了兼顾commonJS规范。但在 babel6 时代，后面一句不再添加，这是为了区分commonJS和ES6的模块定义。

2. 对import xxx from xxx 的转码

import的模块所对应的js文件必须用export default {}导出，或者请参照第一条安装 babel-plugin-add-module-exports 插件。

道理同上，babel6重新定义了对 import 的转码，最终的转码相当于 require(xxx)[‘default’]，相对应的， export default {} 会被转译成 exports.default = {}，两者通过 default 属性导出和取得值，不再使用module.exports

3. 调试

JS转码之后调试很不方便，可以通过source map解决。babel本身就有该功能，可以在转译时生成相应的source map

babel script.js --out-file script-compiled.js --source-maps