對于任何對此感到頭疼的 TypeScript 初學者來說，答案就是 JavaScript 打包器。
由于我使用的是 ES6，因此我選擇了 RollupJs 捆綁器結合以下插件（按此順序使用它們）：
rollup-plugin-resolve - 需要解析 node_modules
rollup-plugin-commonjs - 需要將 node_modules 中的 CommonJS 模塊轉譯為 ES6
rollup-plugin-typescript2 - 可選，您可以在過程中使用它，也可以在運行匯總之前手動使用 tsc - 只需確保使用版本 2（不再維護第一個版本）
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'] }
}))
],
}
Rollup 支持我在這里使用的環境變量： process.env.NODE_ENV === "production"
這允許您創建 npm 腳本package.json以輕松包含或不包含縮小，例如：
"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例如構建縮小包。
您可以在每個項目的 GitHub 上找到更多詳細信息。
