如何让Object.assign与扩展运算符兼容所有浏览器（含IE）？

嘿，我来帮你搞定这个兼容问题！要让Object.assign在IE正常运行，同时让扩展运算符（...）通吃所有浏览器，咱们得从Babel转译和Polyfill补全这两方面入手，结合你的Webpack配置调整就行，一步步来：

一、先安装必要依赖 #

首先打开终端，安装几个核心工具包：

npm install --save-dev @babel/core @babel-loader @babel/preset-env
npm install core-js@3
npm install --save-dev @babel/plugin-proposal-object-rest-spread

简单说下作用：

• core-js@3是补全旧浏览器缺失原生API的核心库（比如IE没有Object.assign，它就能补上）
• 几个Babel相关的包负责把ES6+语法转译成所有浏览器能识别的代码，其中@babel/plugin-proposal-object-rest-spread专门处理扩展运算符的转译

二、配置Babel规则 #

在项目根目录创建babel.config.js文件（如果已经有.babelrc也可以直接修改），写入以下配置：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'IE 11'], // 明确指定兼容IE11及主流浏览器旧版本
          node: 'current'
        },
        useBuiltIns: 'usage', // 自动根据代码需求引入所需Polyfill，不用手动全局导入
        corejs: 3 // 指定使用的core-js版本
      }
    ]
  ],
  plugins: [
    '@babel/plugin-proposal-object-rest-spread' // 转译对象/数组的扩展运算符
  ]
};

这里的useBuiltIns: 'usage'特别省心——它会自动扫描你的代码，只在用到Object.assign、扩展运算符这类特性的地方，引入对应的Polyfill，不会把整个core-js都打包进去，避免冗余代码。

三、调整Webpack配置 #

找到你Webpack配置文件里的module.rules部分，添加Babel-loader的处理规则，确保所有JS文件都经过Babel转译：

module.exports = {
  // ...你的其他Webpack配置（entry、output等）
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有.js后缀的文件
        exclude: /node_modules/, // 排除node_modules目录，不用转译第三方库
        use: {
          loader: 'babel-loader' // 用babel-loader处理这些JS文件
        }
      },
      // ...你已有的其他规则（比如CSS、图片资源的处理）
    ]
  },
  // ...其他配置
};

这样Webpack在打包时，就会把你的ES6+代码转译成兼容IE和所有现代浏览器的语法，同时自动补上Object.assign这类IE缺失的API。

额外提醒 #

• 如果你之前已经有Babel配置，一定要检查targets里是否包含IE 11，否则Polyfill不会针对IE生效
• 不管是数组扩展（[...arr]）还是对象扩展（{...obj}），上面的插件都能完美转译
• 即使你用的是Webpack 5，它自带的语法转译能力有限，还是需要这套Babel配置来处理Polyfill和复杂ES6+特性

内容的提问来源于stack exchange，提问作者Juan Pablo Fernandez