TypeScript 项目的目录结构

Question

TypeScript 项目的惯用目录结构是什么？

我希望这种结构具有以下功能：

TypeScript 源代码和转译 JavaScript 的单独目录
项目源代码和测试代码分开的目录
解决跨测试和源代码引用的机制。

Answer 1

将生成的 JS 与源 TS 分离

我建议生成单个文件输出。无论是浏览器还是 Node，它只是一个更好的主意。请记住，大多数 IDE 都可以隐藏

.gitignore

文件，因此即使您让 .js 文件位于其

.ts

文件旁边，保持整洁的文件窗格

 不应该是一个问题。

从技术上讲，您

可以通过适当设置--outDir来使用

tsconfig.json

以您想要的方式输出。

将测试与源分离

这是相当微不足道的！只需保持

/tests

即可。导入只需通过目录遍历即可进行，如下所示

import {MyClass} from "../src/modules/my-class"

 （其中

../

 是为了退出

/tests

）。

解决引用的机制

这在浏览器中比在 Node 上更具挑战性 — 后者具有

require

，可以开箱即用地用于 TypeScript。

在浏览器上

强烈建议您选择类似

webpack

 的东西，但如果您坚持生活在危险的一面，这里有一个浏览器友好的要求，我用它来快速迭代 TypeScript 代码，而无需设置构建过程。

require()

 对于浏览器

不适合胆小的人——这是你会积累的技术债务

由于工作 Web 导入需要绝对路径，因此您可以通过以下方式使用我的

require()

 hack 与 TypeScript（通常用于不需要重建的快速调试会话）。

/entities/user.ts

import {Username} from "../entities/username";
import {Password} from "../entities/password";

export class User {
    username: Username;
    password: Password;
}

其中

Username

和

Password

 分别是

export

和

/entities/username.ts

 中的

/entities/password.ts

ed 类。

虽然

../entities/

 可能看起来无关紧要，但请注意，浏览器必须拥有指向我们的

Username

和

Password

 实体的适当绝对路径。 :)

Answer 2

看来我做错了。我正在尝试以下结构：

src
|---- lib
|-----|---- mymodule.ts
|---- tests
|-----|---- mymodule.tests.ts

但是，我试图将

lib

目录下的源代码与

tests

下的测试代码分开编译。

find src/lib -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir lib

然后是测试代码：

find src/tests -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir tests

这导致

tests

 文件夹有另一个

lib

 子目录和

tests

 子目录。这不是我想要的。

为了解决我的问题，我需要将它们编译在一起，所以现在我的命令是：

find src -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir .

感谢大家的帮助。

Answer 3

很难给出任何具体的建议，因为这很大程度上取决于项目规模、工具、平台等。

--outDir

 选项，您可以使用它来输出到单独的目录。但是，您可能还希望将输出捆绑到单个文件中可能更可取，只要您同时创建

map 文件以进行调试。例如，您可以使用 Gulp 很好地构建所有这些。

Answer 4

这对我来说是一个不断发展的事情，但对于节点项目，我使用 tsconfig outDir 设置 /src 和 /dist 目录以指向 dist 目录：

/root
  |__dist/
  |__src/
  |____lib/
  |____etc...

对于绝对路径，我在 package.json 中使用“imports”：

"imports": {
    "#src/*": "./dist/*",
    "#lib/*": "./dist/lib/*",
    "#root/*": "./*"
  },

请记住，当它转换时，它不会触及 import 语句，这意味着您需要从创建的 js 代码的角度来编写它们。对我来说，我觉得在开发时从 src/ 角度编写导入更符合逻辑，这就是为什么您会看到 src/ 映射到 dist/ 的原因。

就个人而言，我将 package.json 类型设置为 module 以进行更现代的导入/导出（尽管我知道它可以转换为 commonJS 样式的 require 模块），并且我的目标是最新的 ES 版本 - 推理是如果它刚刚回来-无论如何，结束代码，我不太关心与旧节点版本的向后兼容性。

有点烦人的一件事是，如果您使用 --watch 标志，则缺少任何内置的 dist 文件夹清理解决方案，但就我个人而言，我只是设置 nodemon 来监视 src/ 目录，然后运行类似的东西:

"scripts": {"dev-watch": "nodemon --watch src --ext \"*\" --exec \"tsc && node dist/app.js\""}

TypeScript 项目的目录结构

问题描述投票：0回答：4

4个回答

将生成的 JS 与源 TS 分离

最新问题

TypeScript 项目的目录结构

问题描述 投票：0回答：4

4个回答

将生成的 JS 与源 TS 分离

最新问题

问题描述投票：0回答：4