babel

环境搭建＆基本配置 babel-polyfill babel-runtime

环境搭建 .babelrc配置

{
    "presets": [ // plugin集合，做的预设
        [
            "@babel/preset-env",
           ...
        ]
    ],
    "plugins": [
        ...
    ]
}

1
2
3
4
5
6
7
8
9
10
11

# babel-polyfill 是什么

什么是 Polyfill

core-js 和 regenerator 的集合
- 语法补充
core-js 和 regenerator

按需引入

// presets
        [
            "@babel/preset-env",
          // 按需引用
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]

1
2
3
4
5
6
7
8
9
10

preset: 和 plugins

# babel-polyfill 的问题

会污染全局环境
如果做一个独立的 web 系统，则无碍
如果做一个第三方 lib，则会有问题

# babel-runtime

babel-runtime 就能解决以上的问题

安装

{
  
  "devDependencies": {
    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-runtime": "^7.7.5",
    "@babel/preset-env": "^7.7.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.7.0",
    "@babel/runtime": "^7.7.5"
  }
  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

配置。babelrc


{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "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
24

上次更新: 2023/09/17, 16:36:29

← webpack高级使用 pnpm 配置→