babel入门和那些坑

最初的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在转译这些内容时会直接跳过不转,或者直接报错。

ES6特性 兼容性
箭头函数 支持
类的声明和继承 部分支持,IE8不支持
增强的对象字面量 支持
字符串模板 支持
解构 支持,但注意使用方式
参数默认值,不定参数,拓展参数 支持
let与const 支持
for of IE不支持
iterator, generator 不支持
模块 module、Proxies、Symbol 不支持
Map,Set 和 WeakMap,WeakSet 不支持
Promises、Math,Number,String,Object 的新API 不支持
export & import 支持
生成器函数 不支持
数组拷贝 支持

使用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

你可能感兴趣的:(es6)