Maintain src/ folder structure when building to dist/ folder with Typescript 3

typescript outdir
typescript-typings folder
typescript project structure
typescript build
tsconfig
typescript files
typescript ignore file
typescript allowsyntheticdefaultimports

I have a typescript nodejs server with this structure:

tsconfig.json
package.json
src/
    middleware/
    utils/
    index.ts
dist/
    middleware/
    utils/
    index.ts

When using Typescript 2, I was able to transpile my project from the src/ to a dist/ folder and have a mirror image of my directory structure to work with.

With the release of Typescript 3 they have introduced project references and changed the way code is transpiled into an output directory. Now tsc outputs to the dist/ folder in a nested way like this:

dist/
    src/
        middleware/
        utils/
        index.ts

My tsconfig.json is:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "declaration": false,
    "outDir": "dist/",
    "lib": [
      "es7",
      "dom"
    ]
  },
  "include": [
    "src/"
  ]
}

How can I configure Typescript to output my src/ folder as a mirror image into a dist/ folder?

I had a similar problem when initially converting to a Typescript project. I also set resolveJsonModule: true and the src directory was copied to the output dist directory.

The underlying reason is that one of my source files required package.json at the root of the project. Once i removed that, tsc no longer added src to the dist directory.

In short, make sure you are not requiring files outside of your src directory.

Explanatory FAQ here: https://github.com/Microsoft/TypeScript/wiki/FAQ#why-does---outdir-moves-output-after-adding-a-new-file

tsconfig outDir does not keep directory structure · Issue #5134 , I'm on version 1.6.2 Using directory structure - temp - some - dir - foo.ts together to host and review code, manage projects, and build software together. mhegazy added this to the TypeScript 1.7 milestone on Oct 6, 2015 file.js. src. dir. file.ts. tsconfig.json. outDir is set to "dist". The problem magically  I usually have src/scripts/ for TypeScript source files and third-party JS libraries, src/styles/ for SASS/CSS and src/images/ for the obvious. A gulp build file takes care of compiling TS and SASS, minifying images, preprocessing the template files, etc. and putting them all in a different folder.

The upgrade from TypeScript 2 to 3 by itself shouldn't have changed the behavior; if we can confirm that it did, that may be a bug. In any case, check that the rootDir compiler option points to your src directory and not to the parent directory, because the structure under the rootDir is what is mirrored under the outDir.

dist folder doesn't appear after compilation · Issue #2 · tonysneed , I just ran the build task, and the dist folder is created on my system. tonysneed commented on May 3, 2016. The problem with using gulp-typescript is that it will not preserve directory structure for source maps, so debugging  Introduction This article series refers to D3 version 3 and TypeScript 1. It is therefore recommended to refer to the newer version to get updated information. This series of articles is basically about creating a JavaScript chart from scratch, using D3 and TypeScript.

The problem appears after adding the resolveJsonModule: true to tsconfig.json

Tips for setting up a TypeScript nodejs project, Directory structure. For most nodejs projects any directory layout will work and what you pick will JavaScript code in “dist/” from your TypeScript sources in “src​/”. From a build perspective this will configure a couple of things for you: The “@types/” namespace is maintained by DefinitelyTyped but the  Identifying the structure of a library is the first step in writing its declaration file. We’ll give hints on how to identify structure both based on its usage and its code . Depending on the library’s documentation and organization, one might be easier than the other.

Handbook - Project References, We're also introducing a new mode for tsc , the --build flag, that works hand in hand Previously, this structure was rather awkward to work with if you used a single tsconfig file: src" } ] }. The path property of each reference can point to a directory Additionally, to preserve compatibility with existing build workflows, tsc will  Project references are a new feature in TypeScript 3.0 that allow you to structure your TypeScript programs into smaller pieces. By doing this, you can greatly improve build times, enforce logical separation between components, and organize your code in new and better ways. We’re also introducing a new mode for tsc, the --build flag, that

tsconfig.json · TypeScript, json file starting in the current directory and continuing up the parent directory chain. By invoking tsc with no input files and a --project (or just -p ) command line​  It's the same result as running tsc --outDir build with an empty tsconfig, while it should be the same as tsc --rootDir . --outDir build since "The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project". Adding a rootDir key to the compilerOptions in the json does not seem to help either.

TSConfig Reference - Docs on every TSConfig option, Using Project References can greatly improve build and editor interaction times, preserve : Emit .jsx files with the JSX unchanged; react : Emit .js files with JSX The directory structure of the original source files is preserved; see rootDir if the Running tsc with these settings moves the files into the specified dist folder: sh. Just set the files' file.base so that their file.relative resolves to the path you want for each file relative to the build dir (dest). That's all. That's all. In any such situation, if you can't set the base with config, you can effect such a transformation with a through -like stream right in your task, instead of using a gulp- module.

Comments
  • I've added my tsconfig.json to help clarify. The project is configured around using the "include" key to specify the src/ directory. I just confirmed that the Typescript 2 compiler will simply mirror src/ into dist/ with this configuration, but the Typescript 3 compiler will automatically include the package.json and the src/ folder nested with dist/. Attempts to point rootDir at src/ fail because the package.json file isn't in there.
  • I wasn't able to reproduce this behavior based on the information you've provided. If you can publish a repository that reproduces the problem, I will look. Otherwise, I can only suggest that you try deleting things from your project until the problem goes away and then you'll see what's causing it.
  • I was able to determine the cause. It seems that adding the resolveJsonModule: true to my tsconfig.json was causing tsc to output the dist/ directory differently. I'm still not entirely clear on why it does that, but it does seem to be a talking point in a few Github issues: github.com/Microsoft/TypeScript/issues/25216 and github.com/Microsoft/TypeScript/issues/24744 Thank you for your help Matt!