如何让TypeScript编译生成指定的自定义目录结构？

核心背景 #

你的项目中src/A和src/B下的文件互相引用，导致tsconfig的rootDir必须设为src/，原生tsc编译会严格镜像rootDir的目录结构，因此无法直接将B/b.js输出到build/A目录下。以下是无需后处理脚本、且能保留文件监听功能的可行方案：

方法一：使用Webpack自定义输出结构 #

Webpack可以完全控制输出文件路径，不受源文件目录结构和互相引用的限制。

1. 安装依赖：

npm install webpack webpack-cli ts-loader typescript --save-dev

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

const path = require('path');

module.exports = {
  entry: {
    'A/a': './src/A/a.ts',
    'A/b': './src/B/b.ts'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'build')
  },
  watch: true // 开启文件监听，修改源文件自动重新编译
};

3. 执行编译：

npx webpack --mode development

编译完成后，build/A目录下会同时生成a.js和b.js，且监听功能正常工作。

方法二：使用Rollup结合插件调整输出 #

Rollup更适合库类项目，同样支持自定义输出路径和文件监听：

1. 安装依赖：

npm install rollup rollup-plugin-typescript2 typescript --save-dev

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

import typescript from 'rollup-plugin-typescript2';
import path from 'path';

export default {
  input: {
    'A/a': './src/A/a.ts',
    'A/b': './src/B/b.ts'
  },
  output: {
    dir: path.resolve(__dirname, 'build'),
    format: 'esm' // 可根据需求替换为cjs、umd等格式
  },
  plugins: [typescript()],
  watch: {
    include: 'src/**'
  }
};

3. 执行编译：

npx rollup -c -w

该配置会将两个文件输出到build/A目录下，同时保留正常的文件监听能力。

方法三：TypeScript转换插件方案（进阶） #

如果不想使用打包工具，可以借助ts-patch加载自定义转换插件修改输出路径，但配置相对复杂：

1. 安装依赖：

npm install ts-patch ts-transform-rename-import typescript --save-dev

2. 初始化ts-patch：

npx ts-patch install

3. 修改tsconfig.json：

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./build",
    "plugins": [
      {
        "transform": "ts-transform-rename-import",
        "transformers": { "afterDeclarations": true },
        "replace": [
          {
            "from": "^../B/(.*)$",
            "to": "./$1"
          }
        ]
      }
    ]
  },
  "include": ["src/**/*"]
}

4. 配合自定义脚本重定向输出路径：
   需要额外编写Node.js脚本监听编译过程，将build/B/b.js移动到build/A目录（此步骤属于编译时重定向，而非事后处理，不会影响监听），但整体复杂度高于前两种方案，仅推荐对构建流程有定制需求的场景使用。

总结：原生tsc编译无法满足需求，Webpack或Rollup是最直接可靠的解决方案，既能灵活调整输出结构，又能保证文件监听功能正常运行。

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