对于TypeScript项目,什么是惯用的目录结构?
我希望这样的目录结构包括以下功能:
- 将TypeScript源代码和转译后的JavaScript分开放置在不同的目录中
- 将项目源代码和测试代码放置在不同的目录中
- 解决跨测试和源代码引用的机制。
对于TypeScript项目,什么是惯用的目录结构?
我希望这样的目录结构包括以下功能:
我建议生成单个文件输出。无论是面向浏览器还是Node,这都是一个更好的选择。请记住,大多数IDE可以隐藏.gitignore
文件,因此即使您让.js
文件坐在它们的.ts
文件旁边,也不应该成为问题。
从技术上讲,你可以使用--outDir
通过适当设置tsconfig.json
来输出想要的方式。
这相当简单!只需维护一个/tests
目录。导入所需的只是简单的目录遍历,例如:import {MyClass} from "../src/modules/my-class"
(其中../
是为了从/tests
目录中跳出)。
这在浏览器中比在Node上更具挑战性——后者对于TypeScript而言已经有了可用的require
。
强烈建议你使用类似webpack
之类的工具,但如果你坚持要冒险,这里有一个适用于浏览器的require
,我用它来快速迭代TypeScript代码而无需设置构建流程。
由于绝对路径对于网页导入是必要的,因此在这里,我演示如何在TypeScript中使用我的require()
方法(通常用于快速调试会话而无需重新构建)。
/entities/user.ts
import {Username} from "../entities/username";
import {Password} from "../entities/password";
export class User {
username: Username;
password: Password;
}
Username
和Password
是在/entities/username.ts
和/entities/password.ts
中导出的类。尽管../entities/
看起来多余,但请注意,这对于浏览器具有适当的实体路径是至关重要的。 :)
看来我做错了。我尝试使用以下结构:
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 .
感谢大家的帮助。tsconfig.json
非常简单。如果您还没有尝试过,请强烈建议您去了解一下 - 因为构建过程而选择特定目录结构听起来像是可读性债务的开始 :) - Angad--outDir
选项,可以用来输出到单独的目录。但是,你可能更喜欢打包,所以将输出到单个文件可能更可取,只要你也创建了调试所需的映射文件map。你可以使用例如Gulp之类的工具非常好地构建所有这些内容。
2. 这与目录结构有什么关系?如果你想分割它,那就分割它。
3. “机制”非常广泛,并且取决于你使用的工具。例如,测试运行器可以在测试代码之前“导入”生产代码。你还可以使用一些模块加载库,等等。/root
|__dist/
|__src/
|____lib/
|____etc...
"imports": {
"#src/*": "./dist/*",
"#lib/*": "./dist/lib/*",
"#root/*": "./*"
},
"scripts": {"dev-watch": "nodemon --watch src --ext \"*\" --exec \"tsc && node dist/app.js\""}