typescript tsconfig.json 用于带有 `src` 和 `tests` 的项目

tsconfig.json for project with `src` and `tests`

提问by Borek Bernard

I've got a (desired) structure like this:

我有一个这样的（想要的）结构：

- tsconfig.json
- src
    - app.ts
- tests
    - appTest.ts
    - appTest.js
- dist
    - app.js

If there was no testsfolder, a tsconfig.json like this would work fine:

如果没有tests文件夹，像这样的 tsconfig.json 可以正常工作：

{
    "compilerOptions": {
        "outDir":"dist"
    },
    "include" :[
        "src/**/*.ts"
    ]
}

However, if I add tests/**/*.tsto the includeelement, it also compiles my test files into distand changes its folder structure (understandably, but undesirably).

但是，如果我添加tests/**/*.ts到include元素中，它也会将我的测试文件编译到dist并更改其文件夹结构（可以理解，但不可取）。

Can I tell TypeScript compiler to include test files in the project to support things like refactoring but omit them from output to dist? Specifically, I'd like the .jsto be compiled in the testsdirectory as suggested in the structure above.

我可以告诉 TypeScript 编译器在项目中包含测试文件以支持重构之类的事情，但在输出中省略它们dist吗？具体来说，我希望按照上面结构中的建议在目录中.js编译tests。

回答by tkruse

Leave out the tests from tsconfig. Use mocha for testing, it does not need tsconfig to find the tests.

从 tsconfig 中删除测试。使用 mocha 进行测试，不需要 tsconfig 来查找测试。

In package.config, use something like

在 package.config 中，使用类似

"mocha": "mocha test/ --compilers ts:ts-node/register --recursive"

In tsconfig.json, do

在 tsconfig.json 中，执行

"include": [
    "src/**/*.ts"
],

See Setting up tsconfig with spec/test folder

请参阅使用 spec/test 文件夹设置 tsconfig

回答by Nitzan Tomer

How about separation of the tests completely?
Something like:

完全分离测试怎么样？
就像是：

- scripts
    - tsconfig.json
    - src
        - app.ts
    - dist
        - app.js
- tests
    - tsconfig.json
    - src
        - appTest.ts
    - bin
        - appTest.js

Then scripts/tsconfig.jsonwill look like:

然后scripts/tsconfig.json看起来像：

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

And tests/tsconfig.jsonwill look like:

而tests/tsconfig.json看起来像：

"compilerOptions": {
    "outDir": "bin",
    "rootDir": "src",
    ...
}

---

---

Edit

编辑

I checked this solution in webstorm, and there are two options:

我在webstorm中查看了这个解决方案，有两种选择：

(1) tests files importing from scripts/dist:

(1) 测试从scripts/dist以下导入的文件：

scripts/tsconfig.json:

scripts/tsconfig.json：

"compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "declaration": true
}

tests/tsconfig.json:

tests/tsconfig.json：

"compilerOptions": {
    "outDir": "bin",
    "rootDir": "src"
}

tests/src/apptest.ts:

tests/src/apptest.ts：

import * as app from "../../scripts/dist/app";

...

result in tests/binwill look like:

结果tests/bin将如下所示：

- tests
    - bin
        - apptest.js

And when you refactor in scripts, let's say scripts/src/app.tsthen it indeed has no effect on tests/src/apptest.ts, but compiling it will fail because of the refactor in the source.
So you'll know that you need to change the test files (though it won't be automatic).

当您在 中重构时scripts，假设scripts/src/app.ts它确实对 没有影响tests/src/apptest.ts，但是由于源中的重构，编译它会失败。
所以你会知道你需要更改测试文件（虽然它不会自动）。

(2) tests files importing from scripts/src:

(2) 测试从scripts/src以下导入的文件：

The scripts/tsconfig.jsonfile doesn't need to have the declarationoption on because we'll use the source directly.

该scripts/tsconfig.json文件不需要打开declaration选项，因为我们将直接使用源。

tests/src/apptest.ts:

tests/src/apptest.ts：

import * as app from "../../scripts/dist/src";

...

Refactoring the source will change the test files as desired, but the output in tests/binis this:

重构源将根据需要更改测试文件，但输出tests/bin是这样的：

- tests
    - bin
        - scripts
            - src
                - app.js
        - tests
            - src
                - apptest.js

If you don't mind this structure for tests/binthen you get what you asked for without the need to use other tools.

如果您不介意这种结构，tests/bin那么您无需使用其他工具即可获得所需的内容。

回答by mcku

You may use rootDirsoption within tsconfig.jsonsuch as:

您可以使用以下rootDirs选项tsconfig.json：

{
  "compilerOptions": {
    "rootDirs": [
      "src",
      "tests"
    ]
  }
}

This can be looked up at Typescript documents, on this page (search for Virtual Directories with rootDirssubtitle): Module Resolution

这可以在此页面上查看 Typescript 文档（搜索带有 rootDirs副标题的虚拟目录）：模块解析

回答by Meirion Hughes

I've solved this kind of problem by using gulp and separating the compilation into two steps:

我通过使用 gulp 并将编译分为两步解决了此类问题：

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemap = require('gulp-sourcemaps');
var replace = require('gulp-replace');

var path = require('path');
var merge = require('merge2');

var paths = {
  source: "source/",
  output: "dist/",
  spec: "spec/"
}

gulp.task('compile:typescript', function () {
  var project = ts.createProject('tsconfig.json', {
    typescript: require('typescript')
  });

  var tsResult =  gulp.src(paths.source + '**/*.ts')
    .pipe(sourcemap.init())
    .pipe(project());

  return merge([
    tsResult.dts.pipe(gulp.dest(paths.output)),
    tsResult.js //fix issue with relative source path
      .pipe(sourcemap.write('.', { 
        sourceRoot: function (file) {              
          var relative = path.relative(file.path, path.join(__dirname, "source"));
          var relativeSource = path.join(relative, 'source')
          return relativeSource;
        }
      }))
      .pipe(gulp.dest(paths.output))
  ]);
});

gulp.task('compile:tests', function () {
  var project = ts.createProject('tsconfig.json', {
    typescript: require('typescript')
  });

  var tsResult = gulp.src(paths.spec + '**/*spec.ts')
    .pipe(sourcemap.init())
    .pipe(project());

  return tsResult.js //fix issue with relative source path
    .pipe(sourcemap.write('.', {
      sourceRoot: function (file) {
        var relative = path.relative(file.path, path.join(__dirname, "spec"));
        var relativeSource = path.join(relative, 'spec')
        return relativeSource;
      }
    }))
    .pipe(replace(/(require\('\..\/source\/)/g, 'require(\'..\/dist\/'))
    .pipe(gulp.dest(paths.spec));
});

Your test source-code will importfrom the the actual source files; this means you get correct refactoring.

您的测试源代码将import来自实际的源文件；这意味着你得到了正确的重构。

The source is compiled into the dist folder. The test files are compiled from the spec folder and stored in the same place. During the compiling of the spec files you "fix" the import paths so they link to the compiled output - using gulp-replace.

源代码被编译到 dist 文件夹中。测试文件从 spec 文件夹编译并存储在同一位置。在编译规范文件期间，您“修复”导入路径，以便它们链接到编译后的输出 - 使用 gulp-replace。

There are a few other things; prior a recent update to vscode, outDircould only point to one folder. So to get breakpoints on the tests as-well, the spec jshad to be right next to the tsfiles. You could avoid that now if you want, although I've not tested it.

还有一些其他的事情；在最近更新 vscode 之前，outDir只能指向一个文件夹。因此，为了在测试中获得断点，规范js必须紧挨着ts文件。如果您愿意，现在可以避免这种情况，尽管我尚未对其进行测试。

And here is the refactoring:

这是重构：

回答by Cardin Lee JH

Note: My answer is for if you are using Mocha as your test tool.

注意：我的回答是针对您是否使用 Mocha 作为测试工具。

The relevant information is hidden on a few pages.

相关信息隐藏在几页上。

Firstly, on mocha's homepage:

首先，在 mocha 的主页上：

--require , -r Require a module before loading the user interface or test files.

This is useful for: Compilers such as ... TypeScript via ts-node (using --require ts-node/register)

--require , -r 在加载用户界面或测试文件之前需要一个模块。

这对以下情况很有用： 编译器，例如 ... TypeScript via ts-node（使用 --require ts-node/register）

Hence, you should install ts-nodevia npm install ts-node --save-dev.

因此，您应该通过.ts-node安装ts-nodenpm install ts-node --save-dev。

---

---

Secondly, on mocha's wiki.

其次，在 mocha 的wiki 上。

I won't quote it, but you have to run:

我不会引用它，但你必须运行：

$ mocha --require ts-node/register "test/**/*.ts"

$ mocha --require ts-node/register "test/**/*.ts"

So your package.json might look like this:

所以你的 package.json 可能看起来像这样：

  "scripts": {
    "pretest": "npx tsc",
    "test": "mocha './test/**/*.ts' --require ts-node/register --recursive"
  },

and your tsconfig.json like this:

和你的 tsconfig.json 像这样：

  "include": [
    "./src"
  ]

You don't need to include your /testsfolder into the transpile process. And since you're running directly on the .ts test & source files, no sourcemap is needed; your line numbers and callstack remain usable.

您不需要将/tests文件夹包含到转译过程中。由于您直接在 .ts 测试和源文件上运行，因此不需要源映射；您的行号和调用堆栈仍然可用。

回答by Leroy Dunn

A simple solution I found was creating an npm script which compiles and removes unwanted files/folders in the lib folder.

我发现一个简单的解决方案是创建一个 npm 脚本，它编译和删除 lib 文件夹中不需要的文件/文件夹。

Include the following script in your package.json to remove the test folder in your lib directory after a ts compile.

在 package.json 中包含以下脚本，以在 ts 编译后删除 lib 目录中的 test 文件夹。

"scripts": {
    "build": "./node_modules/.bin/tsc && rm -r ./lib/test",
},