Babel7最佳实践

准备知识

需要用到的网站

1. AST分析
2. AST
3. babel手册
4. babel官网
5. 浏览器版本配置
6. compat-table
7. caniuse

前置知识

1. babel编译流程

围绕AST 解析(parse)->转化(transform)->生成(generate)

1. parse阶段 @babel/parse
2. transform阶段 @babel/traverse遍历AST、@babel/types可以判断AST的各个类型 @babel/template 简化AST创建逻辑
3. generate阶段 @babel/generate生成source map

执行顺序

plugins->presets

插件优先于预设

插件从前往后执行

预设从后往前执行

babel基础

@babel/core

babel转化核心包，内置转化方法

@babel/cli

使用命令行编译文件，开发插件需要用到

@babel/preset-env

根据配置的浏览器适配代码，默认只会转化语法，不会转化新api，新api可以通过2种方法适配，

1. 配置 corejs useBuiltIns 会污染全局
2. 配置 @babel/plugin-transform-runtime 提供别名，不会污染全局

安装

1. npm i @babel/runtime-corejs3
2. npm i @babel/runtime

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": "> 0.25%, not dead",
        "corejs": "3",
        "useBuiltIns": "usage"
      }
    ]
  ]
}

@babel/plugin-transform-runtime

从 @babel/runtime 按需加载辅助函数公共包，我们可以直接安装这个包，会自动依赖**@babel/runtime** 不需要手动安装@babel/runtime,生产环境需要 @babel/runtime

1. 配置了corejs为3npm i @babel/runtime-corejs3 （推荐）
2. 没有配置corejsnpm i @babel/runtime

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ],
    [
      "@zzf-babel/plugins/lib/babel-plugin-import",
      {
        "lib": "foo"
      }
    ]
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "false",
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not dead"
          ]
        }
      }
    ]
  ]
}

babel插件

//todo

自定义插件

//todo

babel预设

一堆插件的集合，避免一个个配置插件

自定义预设

module.exports = function (options) {

    console.log(options)

    return {

        presets: [],

        plugins: [

            require("@zzf-babel/plugins/lib/babel-plugin-remove-console")

        ]

    };

}

学习仓库

https://github.com/zzfn/babel

待整理

• https://live.juejin.cn/4354/4815025