Question

最近，我们发布了新版本的react应用，但导致了IE11 抱怨let关键字。

当我调查时发现，这是因为我们将query-string软件包从5.1.0升级到了6.4.0，并且新代码使用了{{3} }}。而且看起来我们的构建过程没有将导入的软件包从let编译到es6。

我们正在将es5与typescript和babel 7结合使用，这对我们自己的代码和除webpack 4以外的大多数软件包都非常有用。

以下是我们的配置，请提出解决问题的最佳方法。

webpeck.config：

query-string

tsconfig.json：

  {
    test: /\.(t|j)sx?$/,
    exclude: /node_modules/,
    use: [
      { loader: 'babel-loader' },
      {
        loader: 'ts-loader',
        options: { transpileOnly: true }
      }
    ]
  }

.babelrc

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["webworker", "esnext", "dom"],
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "*": ["./src/*"]
    },
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["./src/**/*", "./**/*.d.ts"],
  "exclude": ["node_modules"]
}

示例源文件

  const presets = [
    '@babel/preset-typescript',
    '@babel/preset-react',
    [
      '@babel/preset-env',
      {
        targets: {
          // React parses on ie 9, so we should too
          ie: 9
        },
        forceAllTransforms: true,
        // Disable polyfill transforms
        useBuiltIns: false,
        // Do not transform modules to CJS
        modules: false
      }
    ]
  ]

顺便说一句，我试图同时删除import queryStringLib from 'query-string' queryStringLib.stringify(...)和exlcude node_modules中的webpack.config，但是没有用。我还尝试将tsconfig.json更改为目标tsconfig.json，也没有用。

更新＃1 我刚刚尝试过，如果我同时删除了es5和exclude node_modules中的webpack.config，并且将tsconfig.json更改为目标tsconfig.json，它将会起作用。但是，它将使计算机比以前更加繁忙。不是一个完美的解决方案。

谢谢，罗恩

Answer 1

对我来说，如果我将webpack.config更改为：

{
    test: /\.(t|j)sx?$/,
    exclude: /node_modules(?!(\/|\\)query-string)/,
    use: [
      { loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      },
      {
        loader: 'ts-loader',
        options: { transpileOnly: true }
      }
    ]
  }

换句话说，排除query-string以外的所有其他node_module，并将@babel/preset-env作为预设选项添加到babel-loader（babel-loader不能正常工作）。

tsconfig.json不变。

如何使用Bable 7和Webpack 4为IE11正确构建带有导入包的Typescript？

1 个答案: