將node_modules中的特定包轉譯為es5

Question

我正在製作一個Angular 12（兼容IE）項目，其中我在node_modules中的一些依賴項是非es5的。

在我理解中，tsc不會對node_modules做任何處理，只會從angular.json中的main ;選項開始評估。

在尋找如何做到這一點的選項時，我看到很多建議使用babel，但我不確定

1. 我是否應該將babel與tsc混合使用。 還是我廢除tsc，只透過custom-webpack使用babel？

2. 據我所了解，在所有的轉譯中，轉譯後的代碼都會進入一個輸出目錄，但由於我需要轉譯node_modules中的js文件，所以這些文件的輸出應該只是替換它們在node_modules中的原始檔案？我們如何實現這一點？

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可能是最佳選擇。