babel的编译流程
基本配置：
| 组件名称 | 翻译 | 作用 | 为什么需要 |
|---|---|---|---|
| babel-loader | 加载器 | 1.进行psrse、generate步骤 2.代码的code于AST之间的词法解析 |
|
| babel-core | 核心 | 提供编译基础的API | node API的babel 以被移出 |
| babel-preset-env | 预设环境 | 1.提供具体的编译规则 2.进行transform步骤具体编译 |
使其能在指定环境下正常运行 |
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 忽略目录 提升性能
use: {
loader: 'babel-loader',
options: {
presets: ['env'] // 使用babel-preset-nev 的预设环境
} } } ] } // 出于篇幅考虑而折叠 --源于官网
babel-preset-env
配置语法："presets": ["nev",({option})]
- 包含(es2015|es2016|es2016|stage-0|...)等预设包功能。不包含react
- 默认使用es2015。
| 参数 | 翻译 | 作用 |
|---|---|---|
| targets | 指定目标环境的对象 | 使用对象的形式设置env参数 |
| targets.browsers | 设置目标浏览器的运行环境 | 通过browserslist格式设置[1] |
| targets.node | 目标node运行环境 | 具体node版本 | "current" | true
|
| targets.uglify | 压缩 | 默认值为true
|
| spec | 规范 | 使用更规范的编译规则,可能减慢编译速度 |
| loose | 宽松 | 开启宽松模式,配合loader使用 |
| modules | 模块机制 | 使用何种模块机制 默认: commen.js可选:amd,umd,systemjs
|
| debug | 开启调试模式 | |
| include | 白名单 | 一定进行编译 |
| exclude | 黑名单 | 一定不进行编译 |
| useBuiltIns[2] | 是否对babel-polyfill进行分解,只引入所需部分 |
[1]browserslist 介绍
[2]preset-env包含runtime模块，runtime包含polyfill模块
stage-(0|1|2|3|4):ES7不同阶段语法提案的转码规则
env：根据指定环境要求进行编译
babel常见组件 科普
| 组件名称 | 翻译 | 作用 | 为什么 |
|---|---|---|---|
| babel-cli | 命令行 | 通过命令行操作编译文件 | 不依赖配置文件，方便移植，使用灵活 |
| babel-runtime | 执行环境 | ps:内置了polyfill 避免每个模块重复出现辅助代码 |
|
| babel-plugin-transform-runtime | 静态编译?? | ||
| babel-polyfill | 软垫片 | 兼容新的JS API | babel只转换新的js语法，而不转换新的API 例如：iterator,Generator,Set,Maps,Proxy, Reflect,Symbol,Promise等... |
| 其他组件以后再更新 |
温馨提示：只是个人理解，欢迎纠正
