使用`src`和`tests`的项目的tsconfig.json

Question

我有这样的（期望的）结构：

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

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

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

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

我可以告诉TypeScript编译器在项目中包含测试文件以支持重构等但是从输出到dist省略它们吗？具体来说，我希望.js在tests目录中编译，如上面结构所示。

Answer 1

完全分离测试怎么样？
类似的东西：

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

然后scripts/tsconfig.json将如下所示：

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

tests/tsconfig.json看起来像：

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

修改

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

（1）测试从scripts/dist导入的文件：

scripts/tsconfig.json：

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

tests/tsconfig.json：

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

tests/src/apptest.ts：

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

...

tests/bin的结果如下：

- tests
    - bin
        - apptest.js

当你在scripts中重构时，让我们说scripts/src/app.ts然后它确实对tests/src/apptest.ts没有影响，但是由于源中的重构，编译它会失败。
因此，您将知道需要更改测试文件（尽管它不是自动的）。

（2）测试从scripts/src导入的文件：

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

tests/src/apptest.ts：

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

...

重构源代码会根据需要更改测试文件，但tests/bin中的输出是：

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

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

Answer 2

从tsconfig中忽略测试。使用mocha进行测试，不需要tsconfig即可找到测试。

在package.config中，使用类似

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

在tsconfig.json中，执行

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

请参见Setting up tsconfig with spec/test folder

Answer 3

我通过使用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));
});

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

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

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

这是重构：

Answer 4

您可以在rootDirs中使用tsconfig.json选项，例如：

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

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

Answer 5

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

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

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

Answer 6

注意：我的回答是关于您是否将Mocha用作测试工具。

相关信息隐藏在几页上。

首先，在摩卡咖啡的homepage上：

  

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

     

此功能对以下用户有用：诸如ts-node等TypeScript的编译器（使用--require ts-node / register）

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

---

其次，在摩卡咖啡的wiki上。

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

  

$ mocha --require ts-node / register“ test / ** / *。ts”

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

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

和您的tsconfig.json如下：

  "include": [
    "./src"
  ]

您不需要将/tests文件夹包括到转送过程中。并且由于您直接在.ts测试和源文件上运行，因此不需要sourcemap。您的电话号码和呼叫堆栈仍然可用。