Babel 基础知识

总体流程

源代码 -> AST 树 -> generate 成最终目标代码，如果使用 webapck, babel-loader 会读取 .babel.config.js 或者 .babelrc.js, 这两个文件名的区别是，.babel.config.js一般用于放到根目录下，如果它放到某个文件夹下，解析包依赖的时候会从根目录 node_modules 解析；.babelrc.js 可以放到单独文件夹，也可以放到根目录下，放到某个文件夹下，理解为是对某个文件夹的配置，所以寻找依赖的时候会先从当前文件夹 node_modules 找，然后再往外层找。（在西瓜创作平台使用 yarn workspace 管理仓库时遇到 core-js 版本 2 和 版本 3的依赖解析问题，就是因为子文件夹用的 babel 配置名字是 .babel.config.js， 而不是 .babelrc.js)

@babel/core 核心依赖, core 是 babel 编译代码核心逻辑，可以通过 https://astexplorer.net/ 查看语法解析成 ast 的样子

"@babel/code-frame": "^7.8.3", // 用户生成指向源代码未知的错误信息
"@babel/generator": "^7.9.0", // 根据最终的 AST 树生成目标代码
"@babel/helper-module-transforms": "^7.9.0",
"@babel/helpers": "^7.9.0", // babel 转换代码的工具函数集合
"@babel/parser": "^7.9.0", // 之前的 Babylon，根据源代码生成初始的 AST 树
"@babel/template": "^7.8.6", // 工具类，为 parser 提供模板引擎，更加快速的转化成 AST
"@babel/traverse": "^7.9.0", // 结合 parser, 遍历和更新 AST 树的节点
"@babel/types": "^7.9.0", // 用于判断 AST 树各节点类型，对树节点增、删、改、查，从而间接影响源代码

@ babel / runtime
包含 babel 模块运行时工具函数和 regenerator-runtime，也是 @babel/plugin-transform-runtime依赖，勇于提取公共的 helper 函数，构造沙箱垫片和代码复用环境， 避免帮助函数重复 inject 过多的问题， 该方式的优点是不会污染全局， 适合在类库开发中使用，和 @babel/preset-env 两种方式取其一即可， 同时使用没有意义, 还可能造成重复的 polyfill 文件(当和useBuiltIns: entry 一起用时）
@babel/preset-env(会污染全局， 推荐在业务项目中使用)
对 es6 以及 es6+ 的语法解析以及使用 core-js 根据 browserslist 给新 api 加 polyfill

const presets = ['@babel/preset-react', [
    '@babel/preset-env',
    {
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
    }
]

useBuiltIns值解析

1. 默认 false, 不加任何 polyfill
2. usage: 根据 api 的使用，按需引入 polyfill, 引入的 polyfill 都是用到的，包体积就小，需要注意，如果打包忽略node_modules 时如果第三方包未转译则会出现兼容问题，所以一般放开 node_modules 即可
3. entry: 需要手动在每个 webpack index entry 里手动引入 "core-js/stable"，然后根据 browserslist import 所有的 polyfill，不管你需不需要, 覆盖面积全， 导致打包体积自然就大，
4. "regenerator-runtime/runtime", 然后运行时 preset-env 会根据 api，按需引入 polyfill；那虽然和 usage 一样都是按需引入，但是不同的

其他模块

"@babel/preset-react" // 用于解析 jsx 语法
"@babel/preset-typescript" // 用于解析 ts 语法
"babel-plugin-import" // 将 import 的写法自动转换为按需引入的方式
"@babel/plugin-proposal-class-properties" // 用于处理 class 的静态属性的
"babel-plugin-transform-remove-console" // 清除 console 的

打包情况

1. 开发模式

2. 生产模式

参考文档

1. https://blog.liuyunzhuge.com/...
2. 使用 Babel 进行抽象语法树操作：https://juejin.im/post/684490...