tsconfig 测试和编译问题

Question

这是我的tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "declaration": false,
    "strict": true,
    "strictNullChecks": false,
    "target": "ES2019",
    "module": "commonjs",
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": false,
    "outDir": "dist",
    "esModuleInterop": true,
    "inlineSourceMap": true,
    "rootDir": "./",
    "baseUrl": "./",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.json",
    "tests/**/*.ts"
  ],
}

我的架构如下：

├── tests
├── src
├── eslint.yml
├── tsconfig.json
├── package.json

此结构的问题是在 dist 文件夹中它看起来像这样：

dist
├── tests
├── src

所以我可以将rootDir更改为src，问题是tests文件夹不能在src.[=22=之外]

我想要的是能够在 tests 文件夹和 src 文件夹中使用打字稿。在那种情况下，解决方案是什么。我在几个地方进行了搜索，但没有找到解决我的问题的方法。

也许某些更改可能会影响 eslint，因为它导入 tsconfig.json

我的eslintrc.yml:

env:
  es2017: true
  node: true
  jest: true
extends:
  - airbnb-base
  - "eslint:recommended"
  - "plugin:import/typescript"
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: 2020
  sourceType: module
  project: "./tsconfig.json"
plugins:
  - "@typescript-eslint"
settings:
  "import/resolver":
    typescript: {}
ignorePatterns:
  - "dist/*"

知道如何解决这个问题吗？

Answer 1

我建议您遵循以下模式：将测试放在与正在测试的源文件相同的文件夹中，但带有中缀 test。它会让你的生活在漫长的运行.

Buuut...鉴于您当前的需求：

1。 Post-process 输出文件夹

最简单的解决方案是在 package.json:

中替换您的（假定的）构建脚本

{
    ...
    "scripts": {
        ...
        "build": "tsc",
        ...
    },
    ...
}

使用以下内容，根据需要更新输出文件夹

{
    ...
    "scripts": {
        ...
        "build": "tsc && rm -rf ./dist/tests && mv ./dist/src/* ./dist && rmdir ./dist/src",
        ...
    },
    ...
}

2。扩展 Typescript 配置

您还可以添加仅供 Lint 使用的额外 Typescript 配置。将 rootDir 设置为 ./src 并删除 tsconfig.json 中涉及 tests 文件夹的 include 然后添加以下 tsconfig.eslint.json Typescript 配置：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "rootDir": "./"
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.js",
        "src/**/*.json",
        "tests/**/*.ts"
    ],
}

现在仅在您的 .eslintrc.yml 中使用此配置，它应该可以工作，因为它覆盖了 rootDir 和 include 数组。

我也希望有其他一些解决方案，但即使您可以将临时 rootDir 作为命令行选项添加到 tsc，它也会抱怨包含在root 目录，并且没有顺利的方法来替换命令行上的 include 数组（除了字面上排列所有要编译的文件，这不是一个选项）。

在某些项目中，我真的很想像您在这里那样保留一个单独的 tests 文件夹，但我记得最后，我只是退回到了 tests-in-sources 模式，而不是因为我用这种其他方法遇到的荒谬配置问题的数量。

Answer 2

按照 @fast-reflexes 的回答，经过大量研究，我得出了以下答案：

On package.json 继续只使用 tsc 命令编译：

{
    ...
    "scripts": {
        ...
        "build": "tsc",
        ...
    },
    ...
}

我的tsconfig.json改变了一点。

{
  "compilerOptions": {
    "noImplicitAny": true,
    "declaration": false,
    "strict": true,
    "strictNullChecks": false,
    "target": "ES2019",
    "module": "commonjs",
    "resolveJsonModule": true,
    "allowJs": true,
    "checkJs": false,
    "outDir": "dist",
    "esModuleInterop": true,
    "inlineSourceMap": true,
    "rootDir": "./src",        //  this line changed
    "baseUrl": "./src",        //  this line changed
    "typeRoots": [
      "./node_modules/@types"
    ],
    "paths": {
      "@/*": [
        "*"                    //  this line changed
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.json"            //  remove line related to tests
  ],
}

已创建 tsconfig.eslint.json。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "rootDir": "./",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.json",
    "tests/**/*.spec.ts"              //  line related to tests
  ]
}

我的 eslintrc.yml 改变了：

env:
  es2017: true
  node: true
  jest: true
extends:
  - airbnb-base
  - "eslint:recommended"
  - "plugin:import/typescript"
parser: "@typescript-eslint/parser"
parserOptions:
  ecmaVersion: 2020
  sourceType: module
  project:
    - "./tsconfig.json"
    - "./tsconfig.eslint.json"      <-- added this file
plugins:
  - "@typescript-eslint"
settings:
  "import/resolver":
    typescript: {}
ignorePatterns:
  - ".eslintrc.yml"                 <-- added this file
  - "dist/*"

我的架构如下：

├── dist
    ├── subfolders_without_tests               
├── tests
    ├── tsconfig.json               <-- added this file
├── src
├── eslintrc.yml
├── jest.config.js
├── tsconfig.json
├── tsconfig.eslint.json            <-- added this file
├── package.json

我的jest.config.js:

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/?(*.)+(spec|test).ts'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' }),
  modulePathIgnorePatterns: ['<rootDir>/dist'],
  coveragePathIgnorePatterns: [
    '<rootDir>/dist',
  ],
  coverageReporters: ['json', 'lcov', 'text', 'cobertura', 'text-summary'],
  moduleDirectories: ['node_modules', 'src'],
  collectCoverage: false,
  collectCoverageFrom: ['src/**/*.{ts,js,jsx}'],
};

其他相关链接：

tsconfig 测试和编译问题

tsconfig problems with test and compiling

node.js

typescript

jestjs

eslint

1。 Post-process 输出文件夹

2。扩展 Typescript 配置