TypeScript 5+下SPA合并多TS项目替代prepend引用的方案咨询

核心思路 #

TypeScript 5+已弃用带prepend的项目引用，且官方明确该用法属于意外生效场景，推荐通过前端构建工具或自定义脚本替代，以下是具体可行方案：

方案一：使用Rollup（推荐） #

Rollup专注ES模块打包，对TypeScript支持友好，适合SPA和类库的打包需求：

1. 安装依赖：

npm install rollup @rollup/plugin-typescript @rollup/plugin-node-resolve --save-dev

2. 创建rollup.config.js配置文件：

import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: './src/main.ts', // SPA入口文件路径
  output: {
    file: 'myGame.js',
    format: 'iife', // SPA常用的立即执行函数格式，避免全局变量污染
    sourcemap: true
  },
  plugins: [
    resolve(), // 解析第三方模块依赖
    typescript({ tsconfig: './tsconfig.json' }) // 复用现有TypeScript配置
  ]
};

3. 在package.json中添加打包脚本：

{
  "scripts": {
    "build": "rollup -c"
  }
}

4. 执行npm run build即可生成合并后的单文件。

方案二：使用Parcel（零配置首选） #

Parcel无需复杂配置，适合快速上手的小型项目：

1. 安装依赖：

npm install parcel --save-dev

2. 在package.json中添加脚本：

{
  "scripts": {
    "build": "parcel build ./src/main.ts --out-file myGame.js"
  }
}

3. 执行npm run build，Parcel会自动处理TypeScript编译、模块合并，直接生成目标单文件。

方案三：自定义Node.js脚本拼接（轻量场景） #

若不想引入构建工具，可编写简单脚本手动完成编译与拼接：

1. 确保每个子项目可独立编译为JS文件（通过tsc -p 子项目tsconfig路径命令）。
2. 创建build.js脚本：

const fs = require('fs');
const path = require('path');

// 按原prepend顺序定义要拼接的文件路径
const filesToConcat = [
  '../../Javascript/Loader/dist/loader.js',
  '../../Javascript/Stately/dist/stately.js',
  './dist/your-spa-code.js'
];

let combinedContent = '';

filesToConcat.forEach(filePath => {
  const content = fs.readFileSync(path.resolve(__dirname, filePath), 'utf8');
  combinedContent += content + '\n';
});

fs.writeFileSync(path.resolve(__dirname, 'myGame.js'), combinedContent);
// 如需sourcemap，可引入sourcemap库手动生成

3. 在package.json中添加串联执行的脚本：

{
  "scripts": {
    "build:libs": "tsc -p ../../Javascript/Loader/tsconfig.json && tsc -p ../../Javascript/Stately/tsconfig.json",
    "build:spa": "tsc",
    "build": "npm run build:libs && npm run build:spa && node build.js"
  }
}

方案对比 #

• Rollup：配置灵活，可精细控制打包过程，输出代码体积小，适合中大型项目。
• Parcel：零配置上手快，自动处理依赖与编译，适合快速迭代的小型项目。
• 自定义脚本：轻量无额外依赖，但需手动维护编译与拼接逻辑，扩展性较差。

内容的提问来源于stack exchange，提问作者Nicholas Hill