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

Question

最近我们发布了一个react app的新版本，但是导致IE11
投诉 let关键词。

查了一下，发现是因为我们升级了query-string包裹来自 5.1.0至 6.4.0 ，新代码使用了 let关键字喜欢 here .看起来我们的构建过程没有编译从 es6 导入的包。至 es5 .

我们正在使用 typescript与 babel 7和 webpack 4 ，除了 query-string 之外，这对我们自己的代码和大多数软件包都有好处。 .

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

webpeck.config:

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

tsconfig.json:

{
  "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"]
}

.babelrc

  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目标 es5 ，也不起作用。

更新 #1
我刚试过，如果我删除 exclude node_modules，它会起作用在两者 webpack.config和 tsconfig.json ，并更改 tsconfig.json目标 es5 .但是，它会使计算机比以前更忙。不是一个完美的解决方案。

谢谢，
罗恩

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_modules并添加 @babel/preset-env作为 babel-loader 的预设选项( babel-loader 没有就不能正常工作)。
tsconfig.json 没有变化.