Блог

Недавно мы выпустили новую версию приложения react, но из-за этого 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 на target es5 , тоже не работает.

Обновление # 1, которое я только что попробовал, сработает, если я удалю exclude node_modules оба webpack.config и tsconfig.json и изменю tsconfig.json на target es5 . Однако это сделает компьютер намного более загруженным, чем раньше. Не идеальное решение.

Спасибо, Рон

Для меня это сработало, если я изменил 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 }
      }
    ]
  }
  

Другими словами, исключите все другие node_modules, кроме query-string и добавьте @babel/preset-env в качестве предустановленной опции в babel-loader ( babel-loader без этого не работал корректно).

Никаких изменений в tsconfig.json .