編譯TypeScript時如何處理外部模塊？

Question

我是TypeScript的新手，我正在嘗試許多事情，並且在編譯后陷入了外部模塊的困境。

我從Visual Studio Code中的簡單TypeScript項目開始，目標是將ES2015和es2015作為目標模塊（因為我想盡可能多地使用本機內容），並且我想嘗試使用npm安裝的Strongly Type Events（STE）。

通過改變模塊的分辨率node和設置baseUrl在tsconfig.json ，打字稿在使用STE與非親屬的進口沒有任何問題：

import { SimpleEventDispatcher } from "ste-simple-events";

但是，當我編譯TypeScript時，生成的JavaScript文件具有完全相同的import語句，並且在加載包含此模塊的html時，出現錯誤，找不到模塊。

我不知道如何解決這個問題。 TypeScript是否應該以某種方式將import語句更改為STE的確切位置？ 也許吧，但是TypeScript團隊說TypeScript編譯永遠不會更改import語句中的代碼。

還是應該以某種方式編譯外部模塊，以使它們包含在輸出中？

還是應該在瀏覽器中實現的ES2015標准中的默認模塊分辨率來完成這項工作-我不知道它如何工作以及如何將外部ES2015模塊導入JavaScript？

朝正確方向的任何幫助或推動將不勝感激。

謝謝，馬里奧

Answer 1

對於任何TypeScript初學者over之以鼻，答案就是JavaScript捆綁器。

由於我使用的是ES6，因此我選擇了RollupJs捆綁程序以及以下插件（按此順序使用）：

1. rollup-plugin-resolve -解析node_modules所需
2. rollup-plugin-commonjs將node_modules中的CommonJS模塊轉換為ES6所需
3. rollup-plugin-typescript2可選，您可以在運行過程中使用它，也可以在運行匯總之前手動使用tsc-只需確保使用版本2（不再維護第一個版本）
4. rollup-plugin-terser -壓縮器和混淆器

您可以使用npm安裝所有這些工具： npm install rollup rollup-plugin-resolve rollup-plugin-commonjs rollup-plugin-typescript2 rollup-plugin-terser

將rollup.config.js添加到項目的根目錄，我的看起來像這樣：

    import typescript from "rollup-plugin-typescript2"
    import commonjs from "rollup-plugin-commonjs";
    import resolve from "rollup-plugin-node-resolve";
    import { terser } from "rollup-plugin-terser";
    import pkg from "./package.json"

    export default {
        input: "./wwwroot/js/svgts.js",
        output: [
            {
                file: pkg.module,
                format: "esm",
            },
        ],
        external: [
            ...Object.keys(pkg.dependencies || {}),
            ...Object.keys(pkg.peerDependencies || {}),
        ], plugins: [
            resolve({
                mainFields: ["module"], // Default: ["module", "main"]
            }),

            commonjs({
                include: "node_modules/**"
            }),

            typescript({
                typescript: require("typescript"),
                tsconfig: "./tsconfig.json"
            }),

            (process.env.NODE_ENV === "production" && terser({
                mangle: { reserved: ['svg'] }
            }))
        ],
    }

匯總支持在此處與行一起使用的環境變量： process.env.NODE_ENV === "production"

這使您可以在package.json創建npm腳本，以輕松地包括或不包括縮小，例如：

"scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "rollup": "rollup -c",
    "rollupw": "rollup -cw",
    "start": "concurrently \"npm run rollupw\" \"npm run lite\"",
    "startprod": "NODE_ENV=production concurrently \"npm run rollupw\" \"npm run lite\"",
    "production": "NODE_ENV=production npm run rollup"
  },

然后，您可以在終端npm run production中npm run production以構建縮小的捆綁包。

您可以在每個項目的GitHub上找到更多詳細信息。