Cum să construiești Typescript cu pachete importate corespunzător pentru IE11 folosind Bable 7 și Webpack 4?

Recent, am lansat o versiune nouă a unei aplicații React, dar a cauzat ca IE11 să se plângă de cuvântul cheie let.

Când m-am uitat mai atent, am descoperit că era pentru că am actualizat pachetul query-string de la 5.1.0 la 6.4.0, iar noul cod folosea cuvântul cheie let așa cum se vede aici. Și se pare că procesul nostru de build nu a compilat pachetele importate din es6 în es5.

Folosim typescript cu babel 7 și webpack 4, totul este bine pentru propriul nostru cod și pentru majoritatea pachetelor, cu excepția query-string.

Următoarele sunt configurațiile noastre, vă rugăm să sugerați cea mai bună metodă de a rezolva problema.

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

fișier sursă exemplu

  import queryStringLib from 'query-string'
  queryStringLib.stringify(...)

Apropo, am încercat să elimin exclude node_modules atât în webpack.config, cât și în tsconfig.json, nu funcționează. De asemenea, am încercat să schimb tsconfig.json pentru a ținti es5, nici asta nu funcționează.

Actualizare #1 Tocmai am încercat, va funcționa, dacă elimin exclude node_modules atât din webpack.config, cât și din tsconfig.json, și schimb tsconfig.json pentru a targeta es5. Totuși, va face computerul mult mai ocupat decât înainte. Nu este o soluție perfectă.

Mulțumesc, Ron

Răspuns #1

Pentru mine, a funcționat dacă am schimbat webpack.config în:

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

Cu alte cuvinte, excludeți toate celelalte node_modules, cu excepția query-string, și adăugați @babel/preset-env ca opțiune preset pentru babel-loader (babel-loader nu funcționa corect fără aceasta).

Nicio modificare la tsconfig.json.