React 浏览器兼容性低至 ie11

Question

编译 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())));

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

Answer 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'
  }
};

React 浏览器兼容性低至 ie11

React browser compatibility down to ie11

internet-explorer

cross-browser

cross-compiling

node.js

reactjs