babel7 .babelrc配置

结论

• 写类库时，使用@babel/plugin-transform-runtime。
• 写应用时，使用@babel/polyfill。

1- 建议类库使用

@babel/plugin-transform-runtime 的作用是将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的，这样解决了上面的两个问题。

缺点

因为@babel/plugin-transform-runtime没有污染全局内置对象，对于实例方法如"foobar".includes("foo")就无法进行转换或兼容了。

npm i babel-loader @babel/core @babel/preset-env -D
npm install @babel/plugin-transform-runtime -D
npm install @babel/runtime-corejs3 --save

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4.4"]
                }
            }
        ],
        [
            "@babel/preset-typescript",
             {
                "isTSX": true, // 必须设置，否者编译tsx时会报错
                "allowNamespaces": true,
                "allExtensions": true // 必须设置，否者编译.vue 文件中ts 代码会报错
             }
        ]
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": 3
        }]
    ]
}

2- @babel/polyfill, 写应用时

• 如果在 .babelrc 中设置 useBuiltIns: 'usage'，则不要在 webpack.config.js entry 数组或 source 中包含 babel-polyfill。注意，仍然需要安装 babel-polyfill。
• 如果在 .babelrc 中设置 useBuiltIns: 'entry'，那么在上面讨论的 require 或 import 的应用程序入口的顶部引入 babel-polyfill。
• 如果在 .babelrc 中设置 useBuiltIns: 'false'，将 babel-polyfill 添加到 webpack.config.js 的入口数组中。

npm i babel-loader @babel/core @babel/preset-env @babel/polyfill -D
npm install @babel/plugin-transform-runtime -D
npm i core-js@3 -D

{
  "presets": [["@babel/preset-env", {
    "modules": false,
    "targets": {
      "browsers": ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4.4"]
    },
    "corejs": 3,
    "useBuiltIns": "usage"
  }]],
  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-transform-modules-commonjs"]
}