如何在 TypeScript 项目之间共享代码? [英] How to share code between TypeScript projects?

问题描述

假设我有两个具有以下文件结构的项目

Let's say I have two projects with following file structure

/my-projects/

  /project-a/
    lib.ts
    app.ts
    tsconfig.json

  /project-b/
    app.ts         // import '../project-a/lib.ts'
    tsconfig.json

我想使用 project-a 中的 lib.ts 也来自 project-b.如何做到这一点?

I want to consume lib.ts located in project-a also from project-b. How to do that?

• 将其作为 NPM 模块发布 - 绝对不想要，对于这样一个简单的用例来说，这是一种矫枉过正.我只是想要在两个项目之间共享一个文件.

• Release it as NPM module - absolutely don't want that, it's an overkill for such a simple use case. I just want to share one file between two projects.

使用 import '../project-a/lib.ts' - 不起作用，TypeScript 抱怨

Use import '../project-a/lib.ts' - doesn't work, TypeScript complains

'lib.ts' 不在 'rootDir' 下.'rootDir' 应该包含所有源文件.

• 将 tsconfig.json 上一层，这样它就可以覆盖 project-a 和 project-b - 不能这样做，这些项目的 TypeScript 配置略有不同.也不是很方便，不想那样做.

• Put tsconfig.json one level up so it would cover both project-a and project-b - can't do that, the TypeScript config is slightly different for those projects. Also it's not very convenient, don't want to do that.

还有其他方法吗?

推荐答案

从 Typescript 3.0 开始，这可以通过项目参考来完成.

Since Typescript 3.0 this can be done with Project References.

Typescript 文档:https://www.typescriptlang.org/docs/handbook/project-references.html

Typescript docs: https://www.typescriptlang.org/docs/handbook/project-references.html

我相信您必须将 lib.ts 移动到一个名为lib"之类的小型 ts 项目中

I believe you would have to move lib.ts into a small ts project called something like 'lib'

lib 项目应该有一个 tsconfig 包含:

The lib project should have a tsconfig containing:

// lib/tsconfig.json
    {
          "compilerOptions": {
            /* Truncated compiler options to list only relevant options */
            "declaration": true, 
            "declarationMap": true,
            "rootDir": ".",   
            "composite": true,     
          },
          "references": []  // * Any project that is referenced must itself have a `references` array (which may be empty).
        }

然后在 project-a 和 project-b 中将对此 lib 项目的引用添加到您的 tsconfig 中

Then in both project-a and project-b add the reference to this lib project into your tsconfig

// project-a/ts-config.json
// project-b/ts-config.json
{
        "compilerOptions": {
            "target": "es5", 
            "module": "es2015",
            "moduleResolution": "node"
            // ...
        },
        "references": [
            { 
                "path": "../lib",
                // add 'prepend' if you want to include the referenced project in your output file
                "prepend": true, 
            }
        ]
    }

在 lib 项目中.创建一个文件 index.ts，该文件应该导出您想要与其他项目共享的所有代码.

In the lib project. Create a file index.ts which should export all your code you want to share with other projects.

// lib/index.ts    
export * from 'lib.ts';

现在，假设 lib/lib.ts 看起来像这样:

Now, let's say lib/lib.ts looks like this:

// lib/lib.ts
export const log = (message: string) => console.log(message);

您现在可以在 project-a 和 project-b 中从 lib/lib.ts 导入日志函数

You can now import the log function from lib/lib.ts in both project-a and project-b

// project-a/app.ts 
// project-b/app.ts
import { log } from '../lib';
log("This is a message");

在您的智能感知工作之前，您现在需要使用以下方法构建您的项目 a 和项目 b:

Before your intelissense will work, you now need to build both your project-a and project-b using:

tsc -b 

这将首先构建您的项目引用(在本例中为 lib)，然后构建当前项目(project-a 或 project-b).

Which will first build your project references (lib in this case) and then build the current project (project-a or project-b).

打字稿编译器不会查看来自 lib 的实际打字稿文件.相反，它只会使用构建 lib 项目时生成的 typescript 声明文件 (*.d.ts).

The typescript compiler will not look at the actual typescript files from lib. Instead it will only use the typescript declaration files (*.d.ts) generated when building the lib project.

这就是为什么你的 lib/tsconfig.json 文件必须包含:

That's why your lib/tsconfig.json file must contain:

"declaration": true,

但是，如果您在 Visual Studio 代码中使用 F12 键导航到 project-a/app.ts 中日志函数的定义，您将看到正确的打字稿文件.至少，如果您正确设置了 lib/tsconfig.json:

However, if you navigate to the definition of the log function in project-a/app.ts using F12 key in Visual Studio code, you'll be shown the correct typescript file. At least, if you have correctly setup your lib/tsconfig.json with:

"declarationMap": true,

我创建了一个小型 github 存储库，用打字稿演示了这个项目引用示例:

I've create a small github repo demonstrating this example of project references with typescript:

https://github.com/thdk/TS3-projects-references-example

这篇关于如何在 TypeScript 项目之间共享代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！