You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何让TypeScript的dist输出目录保持一致的目录结构?

固定TypeScript dist输出目录结构的方法

我明白你的问题——当导入不同类型的模块时,TypeScript的输出结构会“乱跑”,这确实很烦人。核心原因是你没有在server/tsconfig.json里明确指定源码根目录,导致编译器自动推断输出路径,从而引发结构变化。下面是具体的解决步骤:

1. 明确配置rootDiroutDir

server/tsconfig.jsoncompilerOptions中,添加rootDir来指定所有源码文件的共同根目录(也就是你的项目根目录),同时确保outDir指向你想要的输出目录:

{
  "compilerOptions": {
    "outDir": "../dist", // 输出到项目根目录下的dist文件夹
    "rootDir": "../", // 指定项目根目录为源码根路径
    "module": "commonjs", // 根据你的项目需求调整,比如ESNext
    "target": "ES2020", // 同样按需调整
    // 其他现有配置...
  },
  "include": ["./**/*", "../shared/**/*"] // 包含server和shared目录下的所有源码
}

这样配置后,TypeScript会严格按照rootDir下的目录结构来生成输出文件:

  • server/app.tsdist/server/app.js
  • shared/customer.model.tsdist/shared/customer.model.js

不管你导入的是内置模块(比如path)还是本地的shared模块,输出结构都会和源码结构完全一致,不会再发生变化。

2. 验证编译命令

你现在使用的tsc -p server命令是正确的,它会加载server/tsconfig.json并按照配置编译。执行命令后,检查dist目录,应该会看到和源码对应的目录结构。

3. 避免根目录tsconfig的干扰

如果你的项目根目录下也有tsconfig.json,确保它不会和server/tsconfig.json的配置冲突。比如,根目录的tsconfig可以设置为不包含server或shared目录,或者只用于其他编译场景(比如前端代码),避免同时编译导致输出混乱。

额外提示:使用baseUrlpaths优化导入(可选)

如果觉得../shared这种相对路径麻烦,可以在server/tsconfig.json里配置baseUrlpaths,让导入更简洁,同时不影响输出结构:

{
  "compilerOptions": {
    // 现有配置...
    "baseUrl": "../",
    "paths": {
      "@shared/*": ["shared/*"]
    }
  }
}

这样你就可以在server/app.ts里用import { Customer } from '@shared/customer.model'来导入模块,编译后的输出结构依然保持不变。

内容的提问来源于stack exchange,提问作者gremo

火山引擎 最新活动