在使用 TypeScript 3构建 dist/文件夹时，维护 src/文件夹结构

我有一个 TypeScript nodejs 服务器，其结构如下:

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

在使用 TypeScript2时，我能够将项目从 src/传输到 dist/文件夹，并拥有要处理的目录结构的镜像。

随着 TypeScript3的发布，他们引入了 项目参考文献，并改变了将代码传输到输出目录的方式。现在 tsc以嵌套的方式输出到 dist/文件夹，如下所示:

dist/
src/
middleware/
utils/
index.js

我的 tsconfig.json 是:

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

如何配置 TypeScript 将 src/文件夹作为镜像输出到 dist/文件夹？

70361 次浏览
小开

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.

小开

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

小开
最佳答案

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

小开

The structure of the output directory is controlled by the rootDir of the compilerOptions. See documentation here, setting it to ./src should solve the issue.

{
"compilerOptions": {
"rootDir": "src",
...
},
"include": [
"src/"
]
}
小开

you can change file import from src/entities/Post -> ../entities/Post in file in ./src

this changes the import in the dist folder.

小开

In addition to specifying compilerOptions.outDir, specify compilerOptions.rootDir in tsconfig.json.

{
"compilerOptions": {
// ...
"outDir": "dist",
"rootDir": "./",
// ...
}
}

Then run: $ tsc -b inside the folder where the tsconfig.json file is.

Note: the compilerOptions.rootDir should be used when you wish include a structure of files of an non-nested folder in the folder of tsconfig.json file.

小开

If you're trying to compile a typescript file at /scr/mydir/hello.ts to /dist/mydir/hello.js but the file keeps getting created at /dist/hello.js, what you can do is to add another typescript file at /src/another.ts. That way the two compiled files will go to /src/another.js and /src/mydir/hello.js. Rememver, in your tsconfig.json, outDir must be set to ./dist

小开

I've used a symlink to accomplish this. It neatly allows you to reference root-level files without referencing them directly. For example:

  1. From /src, create a link to package.json:
ln -s ../package.json ./details.json
  1. Refer to details.json in your TypeScript file:
import { version } from './details.json';


exports.handler = async function ( event: Event ) {
console.log( `lambda version v${version}` );
  1. Bask in the grandeur of dist's flattened file structure:
$ tsc


$ tree dist
dist
├── index.d.ts
├── index.js
└── details.json


0 directories, 3 files
小开

In case you have multiple entries under the include option, make sure they are resolved.

"include": ["src", "tests"],

For example, if tests is not found, the src directory will not be present in the outDir.


提交答案