How can I specify multiple source folders in my tsconfig.json?

Question

I currently have the following project structure:

project/
  tsconfig.json
  webpack.config.js
  package.json
  node_modules/
    ...lots of dependencies
  typings/
    ...lots of .d.ts files for the dependencies
  src/
    ...folders for files for my projects

My tsonfig.json looks like:

{
"compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "outDir": "./js",
    "rootDir": "./src",
    "sourceMap": true,
    "jsx": "react"
},
"exclude": [
    "typings/main.d.ts",
    "typings/main",
    "node_modules"
    ]
}

This all works very well and I can happily develop my application and run it in a browser.

I would now like to add some unit tests to my project and coming from a Java background my initial instinct is to place the tests in a separate folder:

project/
  test/
    ...all of my test cases

Of course, the files in the test/ folder need to reference the code in my src/ folder. How do I set that up?

Or is it "better" to place the tests inline in the src/ folder and have a separate webpack.config.js file for them?

Really confused about how this works in practice in larger TypeScript projects.

Note: I have seen this but found the answer less than illuminating. It seems that the referenced feature discussion about filesGlob would help me, but I just wonder how people are doing this today?

Hongbo Miao · Answer 1 · 2020-10-10T16:42:26.573

16

Now other than rootDir, you can use rootDirs

"rootDirs": ["./scripts", "./src"],

for multiple folders.

Here is the API doc: https://www.typescriptlang.org/docs/handbook/module-resolution.html#virtual-directories-with-rootdirs

edited Oct 10 '20 at 16:42

answered Oct 09 '20 at 20:34

Hongbo Miao

45,290
60
174
267

score 5 · Answer 2 · answered May 11 '17 at 15:39

I think you are looking for path mapping. With the paths compiler option, you can specify not only a mapping to a single location but to several. This is the example from the documentation:

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "generated/*"
      ]
    }
}

If the compiler does not find a module in the expected location, it repeats module resolution in the "generated" subfolder. The baseUrl setting seems redundant but it is mandatory.

Thanks for this. We have settled on using `jest` for running the tests with `ts-jest` and keeping them inline in the `src/` folder. Works very well for us. — David Sykes, May 25 '17 at 02:02

score 1 · Answer 3 · answered Mar 28 '16 at 23:56

1

Or is it "better" to place the tests inline in the src/ folder and have a separate webpack.config.js file for them?

That is what I do. Do not use the TypeScript compiler as a module bundler (Especially if you are not using modules https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md). Just let it do the compile and bundle for browser using webpack and use as it is (if using module commonjs) for backend (nodejs).

answered Mar 28 '16 at 23:56

basarat

261,912
58
460
511

Thanks for the answer. I am using webpack for bundling. For now I only have client code (the server is an existing Java one). When running the tests, do you actually run webpack and bundle a complete .js file, or is there some fancy webpack mode like the webpack-dev-server which does it all in memory? – David Sykes Mar 29 '16 at 02:44
All in memory. See https://github.com/alm-tools/alm/ and https://github.com/alm-tools/alm/blob/master/docs/contributing/README.md#webpack – basarat Mar 29 '16 at 02:48
alm looks amazing, however it does not install on my Windows 7 machine ("npm install" fails during prepublish - looks like you are expecting me to have bash, but this is not mentioned as a prerequisite). In addition, it is not clear to me how this would enable me to bundle and run my tests in memory. – David Sykes Mar 29 '16 at 05:30

How can I specify multiple source folders in my tsconfig.json?

3 Answers3

Linked