前言
配置webpack的时候发现一堆babel相关的组件,在此将所查获的资料整理一下,方便之后查阅。
1. babel-cli
babel命令行工具
// 通过命令行转换js代码
$ babel example.js
2. babel-node
用法同node命令,运行时提供es6运行环境
$ babel-node
> (x => x * 2)(1)
2
$ babel-node es6.js
2
3. babel-register
babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。可以说是为了兼容conmonjs的代码。
# 使用时,必须首先加载babel-register
require("babel-register");
require("./index.js");
4. babel-core
如果某些代码需要调用 Babel 的 API 进行转码,就要使用babel-core模块。
就是提供一种方式,可以用编码的方式转换es6代码。
var babel = require('babel-core');
// 字符串转码
babel.transform('code();', options);
5. babel-polyfill
Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
// 使用时要在转换的es6之前引入,为了方便直接在最顶部引入即可
import 'babel-polyfill';
// 或者
require('babel-polyfill');
6. babel-loader
webpack的loader,要注意的是必须同时安装babel-core
7. babel-plugin-transform-runtime
- 许多常用的垫片函数会在多个文件里面重复出现,启用插件 babel-plugin-transform-runtime 后,Babel 就会使用 babel-runtime 下的工具函数,将这些重复的函数整合。
- babel-polyfill的许多函数会污染全局作用域,转换器transformer会将这些内置(垫片)设置别名到core-js中(避免全局污染)
假如用了babel-polyfill,最好把这个用上。
使用方法,点击这里《Runtime transform 运行时编译es6》注意:该模块依赖babel-runtime
8. babel-eslint
顾名思义对babel的代码使用eslint。用法参见官方介绍
参考文献
《【JavaScript】深入理解Babel原理及其使用》
《Runtime transform 运行时编译es6》
本文大量引用了阮一峰老师的《ECMAScript 6 入门》的内容,本书详细的介绍了es6,强烈建议阅读。
后记
文章难免疏漏,如有问题,还请大家指正。