将浏览器兼容性降低到 ie11答案

【问题标题】：React browser compatibility down to ie11将浏览器兼容性降低到 ie11
【发布时间】：2019-12-14 13:11:00
【问题描述】：

编译 React with parcel 以兼容浏览器 Chrome、Firefox、Safari、Edge 和 IE (10/11)

已尝试将 babel 与 core-js 一起使用，每次在 IE 10 和 11 上加载时都会出现语法错误。已在 .babelrc @babel/preset-react 和 @babel/preset-env 中使用。 react 配置被设置为编译为 dom 而不是 React.createElement 并且 env 被设置为目标 ie10 并且 useBuiltins 被设置为带有 core-js 导入的条目。

"build:site": "parcel build site/site.tsx --out-dir public",

早在 3 月，就发布了一个安全更新，该更新在我参与过的所有 react 网站上全面解决了这个问题。其他网站使用 webpack 也遇到同样的错误

错误信息：

SCRIPT1002: Syntax error
File: site.js, Line: 1685, Column: 32
module.exports=(e=>encodeURIComponent(e).replace(/[!'()*]/g,e=>"%".concat(e.charCodeAt(0).toString(16).toUpperCase())));

可重现的代码：我还无法从新应用中重现错误

【问题讨论】：

详细抛出了什么错误？能否提供steps to reproduce？我按照this article中的步骤使用Parcel创建了一个React应用程序，它可以在IE11中运行良好。你也可以在另一个关于how to support React app in IE11的帖子中查看我的答案。
@YuZhou 我很抱歉，但我无法重现该问题。我已经删除了由 parcel 完成的 minify，并且遇到了相同的问题，但语法略有不同。我试图推断它发生在哪里，并尝试了您提供的选项以及 babels 和 react 网站上的自定义选项。下面是略有不同的语法，但我不希望它有帮助。 module.exports = str => encodeURIComponent(str).replace(/[!'()*]/g, x => "%".concat(x.charCodeAt(0).toString(16).toUpperCase())); },{}],"pWxZ":[function(require,module,exports) { 'use strict';
@YuZhou 我可以说的是，提供的行是唯一使用 => 运算符的地方，这就是 IE 不满意的地方。感谢您抽出宝贵时间查看此问题。
不客气。是的，如果没有 shim 来在 IE 中处理它，你就不能使用 => 箭头函数。该问题可能是由 ES6 特性引起的。也可以试试npm install core-js。你可以参考this thread。
很抱歉延迟提供回复。问题是 parcel 没有转译节点包。这可以通过使用 babel-loader 并且不排除 node_modules 目录在 webpack v4 中实现。通过这样做，节点模块也被转译并允许站点呈现。

标签： node.js reactjs internet-explorer cross-browser cross-compiling

【解决方案1】：

默认情况下，Parcel 不会转译节点模块，但当需要库的某些部分时，它们仍会被捆绑。通过切换到 webpack v4 并且不排除 node_modules 目录，捆绑的代码以及库代码将被转译。此方法确实需要import 'core-js' 并使用babel-loader。举个简单的例子：

module.exports = {
  entry: './app.js',
  modules: {
    rules: [
      {
        test: /\.m?js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ]
  }
  output: {
    filename: 'app.js',
    path: './public'
  }
};

【讨论】：