Übersetzen Sie bestimmte Pakete in node_modules nach es5

Question

Ich erstelle ein Angular 12-Projekt (IE-kompatibel), bei dem einige meiner Abhängigkeiten in node_modules nicht-es5 sind.

Nach meinem Verständnis führt tsc keine Verarbeitung auf node_modules durch, sondern ruft nur main von angular.json ab; Option startet Auswertung.

Auf der Suche nach Optionen dafür habe ich viele Vorschläge zur Verwendung von Babel gesehen, bin mir aber nicht sicher

1. Soll ich Babel mit TSC mischen? Oder verzichte ich auf tsc und verwende einfach babel über das benutzerdefinierte Webpack?

2. Soweit ich weiß, geht der transpilierte Code bei allen Transpilationen in ein Ausgabeverzeichnis, aber da ich die js-Dateien in node_modules transpilieren muss, sollte die Ausgabe dieser Dateien sie einfach im Original ersetzen Dateien in node_modules? Wie erreichen wir das?

Answer 1

您可以在tsconfig中的include中添加特定的覆盖。

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

但是当您为客户端打包时，通常不会将依赖项作为单独的脚本包含在内，而是让打包工具决定将它们放在何处。您没有提到您当前使用的打包工具，但是如果您设置了allowJS: true，则不需要Babel - 例如，对于Webpack配置的相关更改将是：

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

但是，如果您想要自动填充，使用带有Browserslist字符串的@babel/preset-env可能是最佳选择。