babel

2020-11-12 上次更新时间：4/28/2022, 2:19:43 PM 0

Babel: 下一代 JavaScript 语法的编译器。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

# 基础插件

# devDependence（开发）

@babel/cli：命令行工具
@babel/core
@babel/plugin-transform-runtime
@babel/preset-env：包含了常用的es6/7的plugin

# dependence（生产）

@babel/polyfill：浏览器兼容。7.4版本后，babel 建议直接使用corejs + regenerator
@bable/runtime：第三方库必须使用，避免全局污染

# babel-polyfill

babel-polyfill = core-js + regenerator

core-js：一个标准库，集成了所有es6/7的polyfill
regenerator：支持 generator 语法

babel-polyfill 问题：

会污染全局环境
如果是独立web应用则没问题，如果是作为第三方 lib 库则有问题

# babel-runtime

babel-runtime 可以解决 babel-polyfill 全局污染的问题，在开发第三方库必须使用。

@babel/plugin-transform-runtime（开发）
@bable/runtime（生产）

# 配置文件

# .babelrc

.babelrc 或者 babel.config.js babel的配置文件

{
    "presets": [
        [
            "@babel/preset-env",
            {   // 7.4 后直接配置，不需要安装@babel/polyfill了，但要安装corejs
                "useBuiltIns": "usage", // 按需引入 polyfill
                "corejs": 3 // 版本
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# package.json

{
    "babel": {
        "presets": ["@babel/preset-env"]
    }
}

1
2
3
4
5

← webpack npm →