总体流程

源代码 -> 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. 开发模式

  1. 生产模式

参考文档

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