NX如何在前端和后端使用接口库。

huangapple go评论57阅读模式
英文:

NX how to use an interface library in frontend and backend

问题

I'm trying to migrate our repository to a mono repository managed by nx. The frontend is written in angular and the backend uses nodejs / express.
我正在尝试将我们的存储库迁移到由nx管理的单一存储库。前端使用angular编写,后端使用nodejs / express。

In the beginning, I want to use the same interfaces in both.
首先,我想在两者中使用相同的接口。

For that, I created a new workspace (Integrated Monorepo, not sure if this is the best choice):
为此,我创建了一个新的工作区(集成的Monorepo,不确定是否是最佳选择):

npx create-nx-workspace

In the new workspace, I added a frontend and backend app:
在新的工作区中,我添加了前端和后端应用程序:

npm install @nx/angular
nx g @nx/angular:app frontend
npm install @nx/express
nx g @nx/express:app backend

I understand, that libraries are used for reusable code in nx. So my idea was to generate a library for interfaces.
我了解,在nx中使用库来重用代码。所以我的想法是为接口生成一个库。

npm install @nx/workspace
nx generate @nx/workspace:library lib-interfaces

Unfortunately, I get the following error:
不幸的是,我收到以下错误:

Error: Unable to resolve @nx/workspace:library.

Cannot find generator 'library' in

.../workspace/node_modules/@nx/workspace/generators.json.

For that, I didn't find any reason or solution, but I figured out, that I can use @nx/angular for that:
为此,我没有找到任何原因或解决方法,但我发现我可以使用@nx/angular来实现:

nx generate @nx/angular:library lib-interfaces

So my Questions are:
所以我的问题是:

  1. Is this library useable by express (because it is generated by @nx/angular)?
  2. 这个库是否可以被express使用(因为它是由@nx/angular生成的)?
  3. How I can use the library in angular and express?
  4. 我如何在angular和express中使用这个库?
英文:

I'm trying to migrate our repository to a mono repository managed by nx. The frontend is written in angular and the backend uses nodejs / express.
In the beginning, I want to use the same interfaces in both.

For that, I created a new workspace (Integrated Monorepo, not sure if this is the best choice):

npx create-nx-workspace

In the new workspace, I added a frontend and backend app:

npm install @nx/angular 
nx g @nx/angular:app frontend 
npm install @nx/express 
nx g @nx/express:app backend 

I understand, that libraries are used for reusable code in nx. So my idea was to generate a library for interfaces.

npm install @nx/workspace
nx generate @nx/workspace:library lib-interfaces 

Unfortunately, I get the following error:

> Error: Unable to resolve @nx/workspace:library.
>
> Cannot find generator 'library' in
>
> .../workspace/node_modules/@nx/workspace/generators.json.

For that, I didn't find any reason or solution, but I figured out, that I can use @nx/angular for that:

nx generate @nx/angular:library lib-interfaces 

So my Questions are:

  1. Is this library useable by express (because it is generated by @nx/angular)?
  2. How I can use the library in angular and express?

答案1

得分: 2

npx nx generate @nrwl/js:library lib-interfaces

它会询问您要使用的测试库以及构建方式。通常情况下,您需要使用 jesttsc

您也可以使用平面 --dry-run 命令来测试输出,而不影响您的存储库。

当您创建一个库时,根目录下的 tsconfig.base.json 文件会更新,特别是 compilerOptions 键内的 path 对象。

您会找到类似以下的新行:

{
  "compilerOptions": {
    "@organization-name/api-interfaces": ["libs/api-interfaces/src/index.ts"]
  }
}

所以您可以像以下这样使用它:

import {Whatever} from '@organization-name/api-interfaces';
英文:

You can generate a library for interfaces in an Nx workspace using the following command:

npx nx generate @nrwl/js:library lib-interfaces

It will ask you about the testing library you want to use and how you want to build it. Usually jest and tsc is what you need.

You can also run the command with the flat --dry-run to test the output without affecting your repository.

When you create a library, the root tsconfig.base.json file is updated, particularly the path object inside the compilerOptions key.

You will find a new line like the following:

{
  "compilerOptions": {
    "@organization-name/api-interfaces": ["libs/api-interfaces/src/index.ts"]
    }
}

So you can use it like the following:

import {Whatever} from '@organization-name/api-interfaces';

huangapple
  • 本文由 发表于 2023年5月15日 05:31:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76249771.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定