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
      }
    ]
  ]
};