Babel Preset 在 IE11 上不为 Object.assign 提供支持 - “对象不支持属性或方法‘assign’”

Posted 2023-02-22

【中文标题】Babel Preset 在 IE11 上不为 Object.assign 提供支持 - “对象不支持属性或方法‘assign’”

【英文标题】：Babel Preset does not provide support on IE11 for Object.assign - "Object doesn't support property or method 'assign'"

【发布时间】：2018-08-20 12:54:25

【问题描述】：

我正在为我的 react 应用程序使用 babel-preset-env 版本 - 1.6.1，我在 IE 上遇到错误：- 对象不支持属性或方法“分配” '

这是我的 .babelrc :-

"presets": [
    "react",
    [
        "env",
        
            "targets": 
                "browsers": [
                    "last 1 versions",
                    "ie >= 11"
                ]
            ,
            "debug": true,
            "modules": "commonjs"
        
    ]
],
"env": 
    "test": 
        "presets": [
            [
                "babel-preset-env",
                "react"
            ]
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-class-properties",
            "transform-runtime",
            "babel-plugin-dynamic-import-node",
            "array-includes",
            "url-search-params-polyfill",
            "transform-object-assign"
        ]
    
,
"plugins": [
    "transform-object-rest-spread",
    "transform-class-properties",
    "syntax-dynamic-import",
    "transform-runtime",
    "array-includes",
    "url-search-params-polyfill",
    "transform-object-assign"
]

我尝试了这些 polyfill：-

https://babeljs.io/docs/plugins/transform-object-assign/ https://www.npmjs.com/package/babel-plugin-object-assign

但是没用

我正在使用语法：-

let a = Object.assign(,obj);

在我的项目中无处不在

我需要一个适用于我的项目的 polyfill。

【问题讨论】：

How to merge object in IE 11的可能重复

【参考方案1】：

Babel Polyfill 从 Babel 7.4.0 开始已经过时

(Source)

请改用 core-js。

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

或者使用 Webpack：

module.exports = 
  entry: ["core-js/stable", "regenerator-runtime/runtime", "./app/main"]

在我的例子中，上面的 webpack 配置 不起作用！ 因为我还缺少一个 promise polyfill。这是我最终使用的 webpack.config：

entry:  'main': ['core-js/fn/promise', 'core-js/stable/object/assign', './wwwroot/src/app.js'] ,

【讨论】：

谢谢！这适用于我们的 IE11 问题。问题：babeljs.io/docs/en/… "当与@babel/preset-env 一起使用时，如果在 .babelrc 中指定了 useBuiltIns: 'usage' 则不要在 webpack.config.js 条目数组或源中包含 @babel/polyfill。注意，@ babel/polyfill 仍然需要安装。” IE11的入口数组里怎么会有core-js？

谢谢，它成功了。但是现在在 2020 年，在进行了以下更改后，它正在发挥作用。条目： 'main': ['core-js-pure/stable/promise', 'core-js/stable/object/assign', './wwwroot/src/app.js'] ,

谢谢。这在开发和生产中都对我有用！

【参考方案2】：

你需要Babel Polyfill。

要么在你的入口JS文件中导入，要么使用Webpack。

import "babel-polyfill";

或webpack.config.js

module.exports = 
  entry: ["babel-polyfill", "./app/main"]

注意：babel-polyfill 应该在最上面导入否则将不起作用

【讨论】：

那注意非常重要！

或者，如果您有一个多页应用程序并稍后像我一样将 react 添加到遗留代码中，您可以在 或 标记中的任何捆绑包之前包含对脚本 src 的引用babel polyfill - 链接到拥有它的 cdn 或制作本地副本以供参考