React项目中Swiper ES模块兼容IE11的配置问题求助

我之前也碰到过完全一样的情况：在React项目里用Swiper，其他浏览器都正常，唯独IE11弹出箭头函数的语法错误，查下来是dom7模块里还有未转译为ES5的代码。你现有的配置问题主要出在webpack的排除规则和babel配置上，下面是具体的修复步骤：

1. 修正Webpack的Babel转译规则 #

你原来的webpack exclude正则有语法问题，重复写了node_modules导致规则不生效，没能正确把dom7、ssr-window、swiper这几个Swiper依赖包纳入转译范围。请把webpack里的js loader配置改成这样：

test: /\.js$/,
// 排除node_modules里除了dom7、ssr-window、swiper之外的所有包
exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
use: {
  loader: 'babel-loader',
  options: {
    presets: [
      ['env', {
        // 指定目标浏览器，确保IE11被覆盖
        targets: {
          browsers: ['ie 11', 'last 2 versions']
        },
        // 自动按需引入polyfill，减少打包体积
        useBuiltIns: 'usage'
      }],
      'react'
    ],
    plugins: ['transform-decorators-legacy']
  }
}

2. 更新.babelrc配置 #

babel-preset-es2015已经被官方废弃了，建议用babel-preset-env来根据目标浏览器自动适配转译规则，同时保留你需要的其他preset和plugin：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["ie 11", "last 2 versions"]
      },
      "useBuiltIns": "usage"
    }],
    "react",
    "stage-0",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

3. 确保引入Babel Polyfill #

IE11缺失很多ES6+的API，光转译语法还不够，必须引入polyfill来补充这些API。请在你的项目入口文件（比如src/index.js）的最顶部添加：

import 'babel-polyfill';

或者也可以把它加到webpack的entry数组里：

entry: ['babel-polyfill', './src/index.js']

4. 额外检查点 #

• 清除webpack的缓存后重新构建项目，避免旧的未转译代码残留
• 如果还有其他依赖包出现类似语法错误，把对应的包名也加到webpack exclude规则的白名单里（比如node_modules\/(?!(dom7|ssr-window|swiper|其他包名)\/).*）
• 确认你的Swiper版本是4.x（你用的4.1.6没问题），更高版本可能已经修复了这个问题，但如果升级的话要注意API变化

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