关于babel:Babel-基础知识

38次阅读

共计 1939 个字符，预计需要花费 5 分钟才能阅读完成。

源代码 -> 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 值解析

默认 false, 不加任何 polyfill
usage: 依据 api 的应用，按需引入 polyfill, 引入的 polyfill 都是用到的，包体积就小，须要留神，如果打包疏忽 node_modules 时如果第三方包未转译则会呈现兼容问题，所以个别放开 node_modules 即可
entry: 须要手动在每个 webpack index entry 里手动引入 “core-js/stable”，而后依据 browserslist import 所有的 polyfill，不论你需不需要, 覆盖面积全，导致打包体积天然就大，
“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 的

打包状况