babel 6 要点记录

babel-core

• Babel-types: Babel Types 是一个为 AST 节点提供的 lodash 类的实用程序库
• Babel-register: require 钩子会将自己绑定到 node 的require 上并且能自动即时编译
• Babel-template: 从一个字符串模板中生成 AST
• Babel-helpers: Babel 转换的帮助函数集合
• Babel-code-frame: 生成指向源位置包含代码帧的错误
• Babylon: Babylon 是一个用于 Babel 的 JavaScript 解析器

作用:

1.babel-core的transfrom等api的函数可以将js文件或者代码生成 ast,source map 的
2.babel的各种编译插件的基础

两种垫片库

1. babel-polyfill

• core.js 包括promise,set, Reflect 和 Array.prototype.includes 实例方法
• regenerator runtime : 包括async ,await, yeild 的编译方法

使用方式:

//全局一次引入
require("babel-polyfill");
//webpack.config.js方式
module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

优点

• 一次引入,无需配置,方便使用
• 通过env配置(useBuiltIns)可减少发布包体积

缺点

• 引入包有点大
• 影响全局作用域(适用以一个独立应用)

2. transform-runtime

• core-js: 引入babel-runtime/core-js ,包括promise,set,Reflect 等,但不包括实例方法如:includes
• helpers: 引入babel-runtime/helpers,帮助函数
• regenerator: 引入 babel-runtime/regenerator, async,generator编译函数

使用方式:

//通过插件方式使用
{
  "plugins": ["transform-runtime"]
}

优点:

• require方式引入,编译后代码量减少
• 引入之后不会影响全局作用域(适用于开发一个工具 / 库)

缺点

• 不能编译es6新增的实例方法

useBuiltins

• false : 默认引入所有垫片库
• entry: 根据env的target来引入浏览器不支持的垫片
• usage: 根据用户编写的代码,引入用户所需的垫片