<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/890104.md for this page in Markdown format</div>

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

环境搭建 .babelrc配置

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

babel-polyfill 是什么

• 什么是 Polyfill

  core-js 和 regenerator 的集合

  • 语法补充

• core-js 和 regenerator

• 按需引入

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

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"
  }
  
}

配置。babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}