vue cli4 兼容IE浏览器

秒速五厘米 2021-11-27 03:52 716阅读 0赞

### **Babel是一个JavaScript编译器** ###

--------------------

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

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

--------------------

### **babel/polyfill** ###

--------------------

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

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

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

> **使用：import "babel/polyfill"**

注意:babel7版本已删除

--------------------

### **babel/plugin-transform-runtime** ###

--------------------

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

> **安装**

将其安装为开发依赖项。

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

**复制**

并[`@babel/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`][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`选项来选择此选项。

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

<table> 
 <thead> 
  <tr> 
   <th style="vertical-align:baseline;"><code>corejs</code>&nbsp;选项</th> 
   <th style="vertical-align:baseline;">安装命令</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="border-color:#dfe2e5;vertical-align:baseline;"><span style="color:inherit;"><code>false</code></span></td> 
   <td style="border-color:#dfe2e5;vertical-align:baseline;"><span style="color:inherit;"><code>npm install --save @babel/runtime</code></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#dfe2e5;vertical-align:baseline;"><span style="color:inherit;"><code>2</code></span></td> 
   <td style="border-color:#dfe2e5;vertical-align:baseline;"><span style="color:inherit;"><code>npm install --save @babel/runtime-corejs2</code></span></td> 
  </tr> 
  <tr> 
   <td style="border-color:#dfe2e5;vertical-align:baseline;"><span style="color:inherit;"><code>3</code></span></td> 
   <td style="border-color:#dfe2e5;vertical-align:baseline;"><span style="color:inherit;"><code>npm install --save @babel/runtime-corejs3</code></span></td> 
  </tr> 
 </tbody> 
</table>

--------------------

### `helpers` ###

`boolean`，默认为`true`。

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

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

--------------------

### `polyfill` ###

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

--------------------

### `regenerator` ###

`boolean`，默认为`true`。

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

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

--------------------

### `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，以及其他情况，这可能会有问题。为避免担心如何解析运行时模块的位置，这允许用户预先解析运行时，然后将运行时的绝对路径插入到输出代码中。

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

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

--------------------

先使用 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
          }
        ]
      ]
    };

[polyfill]: https://en.wikipedia.org/wiki/Polyfill_%28programming%29
[Link 1]: https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js
[core-js]: https://github.com/zloirock/core-js
[Link 2]: https://babeljs.io/docs/en/babel-plugin-transform-regenerator
[babel_runtime]: https://babeljs.io/docs/en/babel-runtime
[corejs]: https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs
[Link 3]: https://babeljs.io/docs/en/babel-plugin-transform-runtime#helper-aliasing
[Link 4]: https://babeljs.io/docs/en/babel-plugin-transform-runtime#regenerator-aliasing
[Link 5]: https://babeljs.io/docs/en/plugins#plugin-options