Traduire des packages spécifiques dans node_modules en es5

Question

Je réalise un projet Angular 12 (compatible IE) dans lequel certaines de mes dépendances dans node_modules ne sont pas es5.

D'après ma compréhension, tsc n'effectuera aucun traitement sur node_modules, mais récupérera uniquement main de angular.json L'option démarre l'évaluation.

En cherchant des options sur la façon de procéder, j'ai vu de nombreuses suggestions pour utiliser Babel, mais je ne suis pas sûr que

1. Dois-je mélanger babel avec tsc. Ou dois-je supprimer tsc et utiliser simplement babel via custom-webpack ?

   ≪/li>

2. Autant que je sache, dans toutes les transpilations, le code transpilé va dans un répertoire de sortie, mais comme je dois transpiler les fichiers js dans node_modules, la sortie de ces fichiers devrait simplement les remplacer dans l'original. fichiers dans node_modules ? Comment y parvenir ?

   ≪/li>

Answer 1

Vous pouvez ajouter des remplacements spécifiques dans include dans tsconfig.

"include": [
  "src/**/*",
  "node_modules/foo/index.ts",
  "node_modules/bar/quux.baz.mjs"
]

Mais lorsque vous emballez pour le client, vous n'incluez généralement pas les dépendances en tant que scripts distincts, mais laissez l'outil d'empaquetage décider où les placer. Vous n'avez pas mentionné quel outil d'empaquetage vous utilisez actuellement, mais si vous l'avez allowJS: true configuré, vous n'avez pas besoin de Babel - par exemple, les modifications pertinentes apportées à votre configuration Webpack seraient :

{
  test: /\.(js|ts)$/,
  exclude: /node_modules\/(?!(foo|bar)\/).*/, // 这一行

Cependant, si vous souhaitez un remplissage automatique, utiliser @babel/preset-envavec la chaîne Browserslist est probablement la meilleure option.