I am eager to utilize the project references functionality in TypeScript 3.1. Initially, my project's directory structure post-compilation appears as follows:
.
├── A
│ ├── a.ts
│ ├── dist
│ │ ├── A
│ │ │ └── a.js
│ │ └── Shared
│ │ └── shared.js
│ └── tsconfig.json
└── Shared
├── dist
│ └── shared.js
├── shared.ts
└── tsconfig.json
Inside the Shared directory:
shared.ts:
export const name = "name";
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "dist",
"strict": true
}
}
Directory contents of A:
a.ts:
import { name } from "../Shared/shared";
console.log(name);
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "dist",
"strict": true
}
}
The issue I encountered was that all files were being duplicated in A's output directory which prompted me to explore project references.
To enable project references, I made adjustments to the Shared/tsconfig.json and A/tsconfig.json.
"composite": true
"references": [
{ "path": "../Shared" }
]
After compilation, the expected directory structure looks like this:
.
├── A
│ ├── a.ts
│ ├── dist
│ │ └── a.js
│ └── tsconfig.json
└── Shared
├── dist
│ ├── shared.d.ts
│ └── shared.js
├── shared.ts
└── tsconfig.json
However, upon running node dist/a.js in the A directory, an error is thrown:
module.js:538
throw err;
^
Error: Cannot find module '../Shared/shared'
The issue lies in the unresolved reference to the imported module inside the generated a.js file:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var shared_1 = require("../Shared/shared");
console.log(shared_1.name);
Is there a workaround to resolve this without consolidating all output files into one directory?
Alternatively, are there better practices to organize my project for optimal use of project references?