vue cli4 兼容IE浏览器

Babel是一个JavaScript编译器

---

Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript。以下是Babel可以为您做的主要事情：

• 转换语法
• 源代码转换（codemods）

---

babel/polyfill

---

Babel包含一个polyfill，它包含一个自定义的再生器运行时和core-js。

这将模拟完整的ES2015 +环境（没有<第4阶段提案），并且旨在用于应用程序而不是库/工具。（使用时会自动加载此polyfill babel-node）。

这意味着您可以使用新的内置插件状Promise或WeakMap静态方法，如Array.from或Object.assign，实例方法一样Array.prototype.includes，和发电机功能（前提是你使用的再生器插件）。polyfill增加了全局范围以及原生原型，就像String这样做。

使用：import "babel/polyfill"

注意:babel7版本已删除

---

babel/plugin-transform-runtime

---

 可以重复使用Babel注入的帮助程序代码来节省代码，替代babel/polyfill

安装

将其安装为开发依赖项。

npm install --save-dev @babel/plugin-transform-runtime

复制

并@babel/runtime作为生产依赖（因为它是“运行时”）。

npm install --save @babel/runtime

转换插件通常仅在开发中使用，但运行时本身将取决于您部署的代码。 

用法

•    通过.babelrc（推荐）

将以下行添加到您的.babelrc文件中：

没有选择：

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

使用选项（及其默认值）：

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

该插件默认假设所有可填充的API都将由用户提供。否则，corejs需要指定选项。

---

• 通过CLI

babel --plugins @babel/plugin-transform-runtime script.js

---

• 通过Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-runtime"],
});

---

选项

corejs

---

false，2，3或{ version: 2 | 3, proposals: boolean }，默认为false。

例如 ['@babel/plugin-transform-runtime', { corejs: 3 }],

指定一个数字将重写需要可填充API的助手来引用来自该（主要）版本的助手。core-js请注意，它corejs: 2仅支持全局变量（例如Promise）和静态属性（例如Array.from），同时corejs: 3还支持实例属性（例如[].includes）。

默认情况下，@babel/plugin-transform-runtime不会填充提案。如果您正在使用corejs: 3，可以通过启用该proposals: true选项来选择此选项。

此选项需要更改用于提供必要的运行时帮助程序的依赖项：

corejs 选项	安装命令
false	npm install --save @babel/runtime
2	npm install --save @babel/runtime-corejs2
3	npm install --save @babel/runtime-corejs3

 

---

helpers

boolean，默认为true。

切换是否内联通天佣工（classCallCheck，extends，等）被替换为调用moduleName。

有关更多信息，请参阅帮助程序别名。

---

polyfill

在v7中删除此选项只是将其设为默认选项。

---

regenerator

boolean，默认为true。

切换生成器函数是否转换为使用不会污染全局范围的再生器运行时。

有关更多信息，请参阅再生器别名。

---

useBuiltIns

在v7中删除此选项只是将其设为默认选项。

---

 

useESModules

boolean，默认为false。

启用后，转换将使用无法运行的帮助程序 @babel/plugin-transform-modules-commonjs。这允许在webpack等模块系统中进行较小的构建，因为它不需要保留commonjs语义。

例如，以下是已禁用的classCallCheck帮助程序useESModules：

exports.__esModule = true;

exports.default = function(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

并且，启用它：

export default function(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

---

absoluteRuntime

boolean或者string，默认为false。

这允许用户transform-runtime在整个项目中广泛运行。默认情况下，直接transform-runtime从中导入@babel/runtime/foo，但只有@babel/runtime在node_modules正在编译的文件中才有效。对于嵌套的node_modules，npm链接的模块或驻留在用户项目之外的CLI，以及其他情况，这可能会有问题。为避免担心如何解析运行时模块的位置，这允许用户预先解析运行时，然后将运行时的绝对路径插入到输出代码中。

如果编译文件以供以后使用，则不希望使用绝对路径，但是在编译文件然后立即使用文件的上下文中，它们可能非常有用。

您可以在此处阅读有关配置插件选项的更多信息

---

先使用 babel/polyfill，以下仅供参考会有一些问题

先下载 

npm install --save-dev  @babel/plugin-transform-runtime 

npm install --save  @babel/runtime-corejs3 （不要导入到开发环境） corejs:3包含2

vue cli 配置

cli3版本找到babel.config.js。cli2版本找到.babelrc

  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        absoluteRuntime: false,
        proposals: true,
        corejs: 3,
        helpers: true,
        regenerator: true,
        useESModules: false
      }
    ]
  ]

 

VUE CLI 中使用

---

默认提供core-js

注意：使用cli提供的默认core-js版本请勿替换

•  Vue Cli 3

  ---

  npm install --save @babel/polyfill

    main.js 最顶端添加

  import "@babel/polyfill";

•    Vue Cli 4

  ---

   main.js 最顶端添加

  import "core-js/stable";
  import "regenerator-runtime/runtime";

       打开babel.config.js

module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3
      }
    ]
  ]
};