使用Webpack ProvidePlugin polyfill Object时遇TypeError问题求助

问题场景 #

我搭建了Webpack + Babel环境，核心loader配置如下：

module: {
  rules: [
    {
      test: /\.(js|jsx)?$/,
      use: {
        loader: 'babel-loader',
        options: babelOptions
      }
    }
  ]
}

尝试通过Webpack的ProvidePlugin对原生Object做按需polyfill——仅在方法缺失或非原生时注入polyfill，配置如下：

new webpack.ProvidePlugin({
  Object: path.resolve(__dirname, './src/polyfills/object.js'),
})

polyfills/object.js的实现代码：

// content of polyfills/object.js
const { default: isNative } = require('../utils/isNative');

let polyfilledObject = Object;

if (!polyfilledObject || !isNative(polyfilledObject)) {
    polyfilledObject = require('core-js/library/fn/object');
}

if (!polyfilledObject.getOwnPropertyDescriptors || !isNative(polyfilledObject.assign)) {
    polyfilledObject.getOwnPropertyDescriptors = require('core-js/library/fn/object/get-own-property-descriptors');
}

module.exports = polyfilledObject;

运行时触发错误：_iobject.js:4 Uncaught TypeError: Object is not a function（错误来自core-js文件）。但将ProvidePlugin中的Object改为自定义名称ObjectPoly后一切正常，调用ObjectPoly能得到正确的polyfill结果。调试发现：使用ObjectPoly时原生Object输出为"native code"；使用Object时，Object仅输出{}，推测原生Object被Webpack或Babel改写。

问题原因 #

1. Webpack内置处理逻辑冲突：ProvidePlugin试图替换原生全局内置对象时，Webpack内部会在模块作用域内覆盖Object，这个过程会意外将原生Object初始化为空对象{}，而非原生构造函数。
2. core-js导出特性：core-js/library/fn/object导出的是一个静态方法集合对象，而非构造函数。当原生Object已被改写为空对象时，赋值后自然无法作为构造函数调用，触发“不是函数”的错误。
3. Babel预设干扰：如果使用@babel/preset-env且开启useBuiltIns，它会自动注入polyfill，和自定义polyfill的替换逻辑冲突，进一步破坏Object的原生引用。

解决方案 #

方案1：放弃替换原生对象，直接在入口执行polyfill #

不要用ProvidePlugin替换Object，而是在项目入口文件中直接加载polyfill逻辑，扩展原生Object的静态方法：

修改polyfills/object.js为自动执行的polyfill：

// content of polyfills/object.js
const { default: isNative } = require('../utils/isNative');

// 按需polyfill静态方法
if (!Object.getOwnPropertyDescriptors || !isNative(Object.getOwnPropertyDescriptors)) {
    Object.getOwnPropertyDescriptors = require('core-js/library/fn/object/get-own-property-descriptors');
}

if (!Object.assign || !isNative(Object.assign)) {
    Object.assign = require('core-js/library/fn/object/assign');
}

然后在项目入口文件（如src/index.js）顶部引入：

import './polyfills/object.js';

方案2：用resolve.alias配合ProvidePlugin，避免直接替换原生对象 #

如果坚持要通过模块注入实现，可通过Webpack的resolve.alias改写引用，绕开原生对象的冲突：

1. 修改ProvidePlugin配置：

new webpack.ProvidePlugin({
  Object: 'polyfilled-object',
})

2. 在webpack.config.js中添加别名配置：

resolve: {
  alias: {
    'polyfilled-object': path.resolve(__dirname, './src/polyfills/object.js'),
  }
}

3. 调整polyfills/object.js的导出逻辑，基于原生Object扩展：

// content of polyfills/object.js
const { default: isNative } = require('../utils/isNative');

// 直接增强原生Object，不替换构造函数本身
if (!Object.getOwnPropertyDescriptors || !isNative(Object.getOwnPropertyDescriptors)) {
    Object.getOwnPropertyDescriptors = require('core-js/library/fn/object/get-own-property-descriptors');
}

if (!Object.assign || !isNative(Object.assign)) {
    Object.assign = require('core-js/library/fn/object/assign');
}

// 导出增强后的原生Object
module.exports = Object;

方案3：调整Babel配置，关闭自动polyfill注入 #

如果使用@babel/preset-env，检查并关闭useBuiltIns选项，避免和自定义polyfill冲突：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: false, // 关闭自动注入，改用自定义polyfill
      targets: { /* 你的目标环境配置 */ }
    }]
  ]
};

内容的提问来源于stack exchange，提问作者Mykhailo Kuzmich