如何在 Typescript 项目中使用单独的 `src/` 和 `test/` 文件？

Question

我想在我的 Typescript 项目中将源代码和测试分开：

packages/
  torgler/
    package.json
    tsconfig.json
    src/
      FlidgetTorgler.tsx
      WingleTorgler.tsx
    test/
      FlidgetTorgler.test.tsx
      WingleTorgler.test.tsx

由于我不希望

test

文件夹中的任何内容在 torgler 包之外可见，或者永远无法构建，因此

tsconfig

rootDir 应该只是

src/

:

{
  "extends": "../../tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "rootDir": "./src",
    "composite": true
  },
  "include": ["src/**/*"]
}

在

FlidgetTorgler.test.tsx

内部，我现在需要从

../src

文件夹导入：

// FlidgetTorgler.test.tsx
import React from 'react'
import FlidgetTorgler from '../src/FlidgetTorgler'

... test stuff here ...

这一切都很好。但是 Typescript 不允许我从任何 inside

test/

导入，因为它不是来自包含的文件：

// FlidgetTorgler.test.tsx
import React from 'react'
import FlidgetTorgler from '../src/FlidgetTorgler'
import someTestUtil from './utils' // ✗ ERROR: File './utils' is not under 'rootDir'

include指令看起来像我想要的，而Typescript文档中的示例看起来几乎与我想要做的一模一样：

...
{
  "include": ["src/**/*", "test/**/*"]
}

但这行不通。我仍然遇到同样的错误，因为

test/

不在

rootDir

之下。虽然

include

看起来可以放任何你想要的东西在那里，但它似乎只能拾取

rootDir

下的东西。

我可以将

rootDir

更改为

.

，或者我可以使用 rootDirs 代替，但这两个选项都会破坏从

torgler

导入的所有上游内容，而且我还没有让它们与我的其余部分一起使用项目。

（这个问题类似于带有 src 和 test 的 Typescript 配置，但是有一些无关的细节，我不确定答案在任何情况下都是我的最佳选择。）

像这样将

src/

和

test/

文件夹分开的最佳方法是什么？

Answer 1

由于项目的根目录包含这两个文件夹，因此您根本不需要采取任何特殊步骤。

tsconfig.json

{
  "extends": "../../tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "composite": true
  },
}

将导入保存在测试文件中，如下所示：

import Component from '../src/Component';

您可以像这样使用别名：

tsconfig.json

{
  "extends": "../../tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "composite": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
  },
}

然后您的导入将如下所示：

import Component from '@/Component';

然后，您可以为构建使用单独的第二个 tsconfig，就像您的一样：

tsconfig.build.json

{
  "extends": "../../tsconfig.build.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "dist",
    "rootDir": "./src",
    "composite": true
  },
  "include": ["src/**/*"]
}

您的构建脚本将如下所示：

package.json

{
   scripts: {
      "build": "tsc --project tsconfig.build.json",
   }
}