IE11中使用@material-ui/core出现解构语法错误，如何解决？

嘿，我之前也踩过IE11兼容的坑，太懂这种头疼的感觉了！咱们一步步拆解问题，搞定它：

问题根源 #

你自己写的箭头函数能正常运行，是因为Babel帮你转译了，但装了@material-ui/core之后，它源码里的箭头函数没被处理——默认情况下Babel会跳过node_modules目录的文件，而IE11完全不支持箭头函数，自然就报语法错了。

具体解决方案 #

1. 让Babel转译@material-ui/core #

修改你的Webpack配置，告诉babel-loader不要跳过@material-ui相关的包：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      // 包含你的源码目录和@material-ui包
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'node_modules/@material-ui')
      ],
      loader: 'babel-loader'
    }
  ]
}

如果之前配置了exclude，也可以改成这种写法：

exclude: /node_modules(?!\/@material-ui)/

2. 完善Babel preset-env配置 #

你的.babelrc里的env preset没指定目标浏览器，Babel不知道要转译到IE11兼容的版本。更新成下面这样：

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["ie 11"]
      },
      "useBuiltIns": "usage",
      "corejs": 2
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-object-rest-spread",
    ["transform-runtime", {
      "polyfill": true,
      "regenerator": true
    }]
  ]
}

• targets明确指定兼容IE11，Babel会自动转译所有IE11不支持的语法
• useBuiltIns: 'usage'会自动按需引入polyfill，不用手动在入口文件引入整个core-js
• 记得安装对应版本的core-js：npm install core-js@2 --save

3. 移除冗余的Babel插件 #

你之前的插件里transform-es2015-arrow-functions、transform-async-to-generator、transform-async-functions都是多余的——preset-env已经包含了这些转译逻辑，留着反而可能冲突，直接删掉就行。

4. 验证修复效果 #

重新打包后，打开bundle.js搜索原来报错的withStyles函数，看看箭头函数是不是已经被转成了普通的function声明，如果是的话，IE11应该就能正常运行了。

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