Babel 学习
前段时间学习写 React.js ,使用了了 Dva.js 框架。然后在 npm run dev
可以运行的情况下。发现静态文件编译一直出问题。提示 Uglify 打包失败。定位问题是使用了 ES6 写的包 https://github.com/sorrycc/blog/issues/68。
因为那个包是我自己写的,本来就是用于 Node 的包,这样就需要用 Babel 将 es6 转成 es5。
创建 .babelrc
在项目名称创建配置文件。
格式:
1 | { |
presets 就是转码规则。当然需要在项目里配置对应的规则转化包。
1 | # ES2015转码规则 |
比如我是要转换 es6(es2015)。
所以首先需要修改 .babelrc
1 | { |
然后安装对应的转换包
1 | npm install --save-dev babel-preset-es2015 |
转换
转换通过 babel-cli
来进行转换。
babel-cli
可以安装全局也可以安装到项目中,通过 npm
参数调用。
基本用法:
1 | # 转码结果输出到标准输出 |
babel-node
是通过转换代码,直接在 Node 环境中运行 ES6。因为到现在 (v8.x)为止,稳定版本 Node 目前还未完全支持 ES6。所以使用 babel-node 可以直接运行这些文件。
1 | $ babel-node es6.js |
也可以通过 npm 脚本,直接运行用 es6 写的脚本,而不需要事先转换。(虽然现在版本 Node 已经支持大部分的 ES6 的预发了)。
babel-register
改写 require ,在引用时自动进行转码 ES6 文件。
1 | $ npm install babel-register --save-dev |
然后在代码运行最开始的地方引入require('babel-register')
即可。
然代码后期引入就会自动对文件代码进行转换。
babel-core
Babel 核心 API。
使用方法常见:
1 | var babel = require('babel-core'); |
配置对象options
,可以参看官方文档 http://babeljs.io/docs/usage/options/。
一个例子。
1 | var es6Code = 'let x = n => n + 1'; |
babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码。
举例来说,ES6在Array
对象上新增了Array.from
方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill
,为当前环境提供一个垫片。
1 | # 安装 |
1 | // 使用 |
Babel默认不转码的API非常多,详细清单可以查看 babel-plugin-transform-runtime
模块的definitions.js文件。
浏览器环境
在浏览器运行 Babel 的方法,即时编译。
Babel 6.0 开始不再提供。
1 | $ npm install babel-core@old |
引用
1 | <script src="node_modules/babel-core/browser.js"></script> |
在线转换
与其他工具配合
ESLint
安装:
1 | $ npm install --save-dev eslint babel-eslint |
.eslint
1 | { |
package.json
1 | { |
Mocha
package.json
1 | { |
参照阮一峰大师的文章 http://www.ruanyifeng.com/blog/2016/01/babel.html