angular - 禁止在 Nrwl Nx 的同一库中导入桶文件

问题描述

假设我们有一个应用程序和一个库Nrwl Nx。

/apps
  /myApp

/libs
  /myLib
    /components
       /my.component.ts
       /other.component.ts
    /index.ts

我已经设置了标签nx.json和nx-enforce-module-boundaries规则来阻止在库中导入应用程序。它有效，这部分很好。

我想做的另一件事是在库中强制使用桶文件。所以我在tsconfig.ts

"paths": {
   "@myNs/my-lib": ["libs/myLib/index.ts"]
}

我遇到了这个问题。假设我们有一些从index.ts.

// index.ts
export { MyComponent } from './components/my.component';

现在，如果我们使用一些自动导入 IDE 功能（例如 fromWebStorm或VS Code）。他们将MyComponent使用该路径导入@myNs/my-lib- 这是意料之中的，因为我刚刚这样配置它。

当我想在里面自动导入一些东西时，一个真正的问题出现了myLib（这些导入应该是相对的，而不是@myNs/my-lib） - 根据逻辑和这篇文章（[这里的有趣文章]）：

永远不要让 lib 从它自己的 Barrel 文件中导入

特定库中的 TypeScript 模块不应该关心库公开的功能，因此它不应该在任何时候使用自己的桶文件。

如果一个模块从它自己的桶文件中导入一些东西，它几乎总是会导致循环引用错误。因此，从模块内部导入应该使用相对路径导入。

因此，我找到了一种解决方法来阻止 lib 中类似 TS 路径的导入。我在里面添加了一条规则libs/myLib/tslint.json：

"rules": {
   "import-blacklist": [true, "@myNs/my-lib"]
}

无论如何，它并没有修复自动导入功能，只是不允许在库中使用错误的导入。

另一个问题是仍然允许错误的导入。假设OtherComponent要导入MyComponent那么有三种可能：

import { MyComponent } from './my.component'; // the correct way
import { MyComponent } from '.'; // not the best, but also the correct way
import { MyComponent } from '..'; // using barrel file - not correct (look at the citation above), but still successfuly validated by TSLint

问题：

如何禁止在同一个库中导入桶文件？
如何将 IDE 配置为在 lib 内部具有相对路径，在 ( @myNs/my-lib) 外部具有 TypeScript 路径？

标签： angularvisual-studio-codewebstormtslintnrwl

angular - 禁止在 Nrwl Nx 的同一库中导入桶文件

问题描述

解决方案

推荐阅读