typescript 使用 spec/test 文件夹设置 tsconfig

Setting up tsconfig with spec/test folder

提问by unional

Say I put my code under srcand tests under spec:

假设我把我的代码放在下面src并测试spec：

+ spec
+ --- classA.spec.ts
+ src
+ --- classA.ts
+ --- classB.ts
+ --- index.ts
+ tsconfig.json

I want to only transpile srcto the distfolder. Since index.tsis the entry point of my package, my tsconfig.jsonlook like this:

我只想转换src到dist文件夹。因为index.ts是我的包的入口点，所以我tsconfig.json看起来像这样：

{
  "compileOptions": {
    "module": "commonjs"
    "outDir": "dist"
  },
  "files": {
    "src/index.ts",
    "typings/main.d.ts"
  }
}

However, this tsconfig.jsondoes not include the test files so I could not resolve dependencies in them.

但是，这tsconfig.json不包括测试文件，因此我无法解析其中的依赖项。

On the other hand, if I include the test files into tsconfig.jsonthen they are also transpiled to distfolder.

另一方面，如果我将测试文件包含在其中，tsconfig.json那么它们也会被转换为dist文件夹。

How do I solve this problem?

我该如何解决这个问题？

采纳答案by unional

I ended up defining multiple config files and use extendsto simplify them.

我最终定义了多个配置文件并用于extends简化它们。

Say I have two files: tsconfig.jsonand tsconfig.build.json

假设我有两个文件：tsconfig.json和tsconfig.build.json

// tsconfig.json
{
  ...
  "exclude": [...]
}

// tsconfig.build.json
{
  ...
  "files": [ "typings/index.d.ts", "src/index.ts" ]
}

This way, I can have fine control on what to build (using tsc -p tsconfig.build.json) and what the ts language service(IDE) handles.

这样，我可以很好地控制要构建的内容（使用tsc -p tsconfig.build.json）以及ts language service（IDE）处理的内容。

UPDATE: now as my projects grow, I ended up having more config files. I use the "extend" feature that is now available in TypeScript:

更新：现在随着我的项目的增长，我最终拥有更多的配置文件。我使用现在在 TypeScript 中可用的“扩展”功能：

// tsconfig.base.json
{
  // your common settings. Mostly "compilerOptions".
  // Do not include "files" and "include" here,
  // let individual config handles that.
  // You can use "exclude" here, but with "include",
  // It's pretty much not necessary.
}

// tsconfig.json
{
  // This is used by `ts language service` and testing.
  // Includes source and test files.
  "extends": "./tsconfig.base.json",
  "atom": { ... },
  "compilerOptions": {
    // I set outDir to place all test build in one place,
    // and avoid accidentally running `tsc` littering test build to my `src` folder.
    "outDir": "out/spec"  
  }
  "include": [ ... ]
}

// tsconfig.commonjs.json or tsconfig.systemjs.json or tsconfig.global.json etc
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    // for some build this does not apply
    "declaration": true/false,
    "outDir": "dist/<cjs, sys, global, etc>",
    "sourceRoot": "..."
  },
  // Only point to typings and the start of your source, e.g. `src/index.ts`
  "files": [ ... ],
  "include": [ ... ]
 }

回答by barndog

This is somewhat dependent on whatever testing framework you're using but I like to use ts-nodeto compile my test files. Using mocha, your npm testscript might look like:

这在某种程度上取决于您使用的任何测试框架，但我喜欢使用ts-node来编译我的测试文件。使用 mocha，您的npm test脚本可能如下所示：

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

In your tsconfig.json, make sure to remove the rootDiroption.

在您的 tsconfig.json 中，确保删除该rootDir选项。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "removeComments": true,
        "sourceMap": true,
        "outDir": "lib"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "lib",
        "typings/**"
    ]
}

When you try to run typescript with rootDirset to srcor whatever the base folder for your application code is, it'll disallow any compilation in a directory that sits outside, such a tests. Using ts-node, you can easily keep everything separate without having to have separate TypeScript configuration files.

当您尝试使用rootDirset tosrc或任何应用程序代码的基本文件夹运行打字稿时，它将禁止在位于外部的目录中进行任何编译，例如tests. 使用ts-node，您可以轻松地将所有内容分开，而不必拥有单独的 TypeScript 配置文件。

回答by Amid

I think you should not use 'files' option in your config. Instead you can exclude unwanted files and have it like this:

我认为你不应该在你的配置中使用 'files' 选项。相反，您可以排除不需要的文件并像这样：

{ 
    "compilerOptions": { 
        "module": "commonjs", 
        "outDir": "dist"
    },
    "exclude": [
        "node_modules",
        "dist",
        "typings/browser.d.ts",
        "typings/browser/**"
    ]
} 

This will preserve your original structure in the 'dist' folder without mixing tests and app js files:

这将在“dist”文件夹中保留您的原始结构，而不会混合测试和应用程序 js 文件：

--dist
----spec
-------....
----src
-------....

回答by user1067920

Here is a detailed solution to manage sources and tests:

这是管理源和测试的详细解决方案：

• compilation includes sources and tests folders/files
• build includes only sources
• IDE (VSCode, ...)

• 编译包括源和测试文件夹/文件
• 构建仅包括源
• IDE（VSCode，...）

Config

配置

The solution is based on 2 tsconfig.tsfiles as mentioned in other answers.

该解决方案基于tsconfig.ts其他答案中提到的2 个文件。

The main ./tsconfig.ts(used for compilation and IDE):

主要./tsconfig.ts（用于编译和IDE）：

{
  "compileOptions": {
    "module": "commonjs"
    "outDir": "dist"
  },
  "include": [
    "spec/**/*. spec.ts"
  ],
  "files": {
    "src/index.ts",
  }
}

The second ./tsconfig-build.ts(used for build):

第二个./tsconfig-build.ts（用于构建）：

{
  "extends": "./tsconfig.json",
  "exclude": [
    "spec/**/*. spec.ts"
  ]
}

Note: we exclude test files that have been included previously

注意：我们排除之前包含的测试文件

Build

建造

Build command: tsc -p tsconfig-build.json

构建命令： tsc -p tsconfig-build.json

Or npm run buildif script is added in package.json:

或者npm run build如果脚本被添加到package.json：

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