vue cli4 兼容IE浏览器

Babel是一个JavaScript编译器


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

  • 转换语法
  • 源代码转换(codemods)

babel/polyfill


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

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

这意味着您可以使用新的内置插件状PromiseWeakMap静态方法,如Array.fromObject.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


false23{ 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

切换是否内联通天佣工(classCallCheckextends,等)被替换为调用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/runtimenode_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
      }
    ]
  ]
};

       

      

你可能感兴趣的:(vue)