Babel7最佳实践

    0

准备知识

需要用到的网站

  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
json
{ "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
json
{ "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预设

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

自定义预设

js
module.exports = function (options) { console.log(options) return { presets: [], plugins: [ require("@zzf-babel/plugins/lib/babel-plugin-remove-console") ] }; }

学习仓库

https://github.com/zzfn/babel

待整理

评论区

共有评论 0

暂无评论