获取 @babel/present-env 的默认实现以与 IE11 一起使用

Question

我的 @babel/preset-env 配置工作正常，但 IE11 除外。当我在 IE11 中运行它时，我得到这个错误：

SCRIPT438: Object doesn't support property or method 'assign'

在谷歌搜索错误后，我发现我需要使用 babel/polyfill，但它已被弃用，建议您现在使用 core-js。对于如此广泛使用的工具，缺少官方文档。

我关注了其他 Whosebug 帖子并提出了这个解决方案，但我仍然收到错误消息：

Package.json:

"devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.1.0",
    "core-js": "^3.6.5",
    ...
}

webpack.config:

{
   test: /\.(js)$/,
   exclude: /node_modules/,
   use: {
      loader: 'babel-loader',
      options: {
         // presets: ['@babel/preset-env'],
         presets: [
            [
               "@babel/preset-env", {
                  "targets": {
                     "browsers": ["last 2 versions", "> 0.1%", "not dead", "ie >= 11"]
                  },
                  "useBuiltIns": "usage",
                  "corejs": 3
               }
            ]
         ]
      }
   }
},

我没有 babelrc 或 browserlists 文件，因为我希望它尽可能保持简约。

为什么这不起作用，为什么我继续收到此错误：

function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}
SCRIPT438: Object doesn't support property or method 'assign'

Answer 1

有类似的问题，设置是使用 .config 和 browserlistrc

尝试在下面进行更改，看看是否有帮助

corejs: { version: 3, proposals: true }

Answer 2

为未来的读者回答我自己的问题。

所以@babel/polyfill被使用corejs和@babel/runtime-corejs3代替了。执行以下操作以获得 IE11 中 Object.assign() 错误的 polyfill。

1。安装包

npm i core-js @babel/core @babel/runtime-corejs3 --保存开发

这会在撰写本文时安装 core-js v3.6.5。

2。更新 webpack

将 "useBuiltIns": "usage" 和 "corejs": 3 添加到您的 babel/preset-env 规则：

module: {
   rules: [
      {
         test: /\.(js)$/,
         exclude: /node_modules/,
         use: {
            loader: 'babel-loader',
            options: {
               presets: [
                  [
                     "@babel/preset-env", {
                        "useBuiltIns": "usage", 
                        "corejs": 3
                     }
                  ]
               ]
            }
         }
      },
      // Your other rules...
   ]
},

3。（可选）添加您的浏览器

如果您想指定自己的浏览器列表字符串，可以将其添加到 package.json：

"devDependencies": {
   // my dev dependencies
},
"dependencies": {
   // my dependencies
},
"browserslist": "last 2 versions, > 0.1%, not dead"

4。添加 corejs

的导入

您需要将 core-js 导入到需要 polyfill 的地方。我把它放在我的根 ./App.js 中，以便覆盖全球。

import "core-js/stable";

这应该可以修复 IE11 中的 Object.assign() 错误，但是...

5。其他 polyfills..

因此，在执行此操作后，我在使用 IE11 不支持的 .closest() 时遇到了另一个错误。为此获取 polyfill 的一种快速简便的方法是将此脚本添加到您的

<script src="https://unpkg.com/element-closest"></script>

您也可以将它作为一个包导入，但上面交付的 CDN 非常快捷。

获取 @babel/present-env 的默认实现以与 IE11 一起使用

Getting default implementation of @babel/present-env to work with IE11

webpack

babeljs

babel-preset-env

1。安装包

2。更新 webpack

3。（可选）添加您的浏览器

4。添加 corejs

5。其他 polyfills..

获取 @babel/present-env 的默认实现以与 IE11 一起使用

Getting default implementation of @babel/present-env to work with IE11

webpack

babeljs

babel-preset-env

1。安装包

2。更新 webpack

3。 （可选）添加您的浏览器

4。添加 corejs

5。其他 polyfills..

3。（可选）添加您的浏览器