node.js - React 浏览器兼容性低至 ie11

Question

用parcel编译React以兼容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",

早在三月份就发布了一个安全更新，在我工作过的所有 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 不会转译 Node 模块，但当需要库的某些部分时，它们仍然会被捆绑。通过切换到 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'
  }
};