禁止在 Nrwl Nx 的同一庫中導入桶文件 (Disallow barrel file imports within the same library in Nrwl Nx)


問題描述

禁止在 Nrwl Nx 的同一庫中導入桶文件 (Disallow barrel file imports within the same library in Nrwl Nx)

假設我們在 Nrwl Nx 中有一個應用程序和一個庫。

/apps
  /myApp

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

我已經在 nx.json 中設置了標籤nx‑enforce‑module‑boundaries 規則阻止在 lib 中導入應用程序。它可以工作,這部分很好。

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

"paths": {
   "@myNs/my‑lib": ["libs/myLib/index.ts"]
}
中創建了一個路徑

我遇到了這個問題。假設我們從 index.ts 導出了一些東西。

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

現在如果我們使用一些自動導入 IDE 功能(例如從 WebStormVS Code </代碼>)。他們將使用路徑 導入 MyComponent 如果一個模塊從它自己的桶文件中導入一些東西,它幾乎總是會導致循環引用錯誤。因此,從模塊內部導入應該使用相對路徑導入。

所以我找到了一種解決方法來阻止 lib 內部的 TS 路徑類導入。我在 libs/myLib/tslint.json 中添加了一條規則:

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

無論如何,它不能修復自動導入功能,只是不允許在 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

問題:


  1. 參考解法

    方法 1:

    Here's the setting in IntelliJ. I am seeing this work correctly in v2020.1.

    setting in IntelliJ under Editor > Code Style > Typescript named "Use path mappings from tsconfig.json set to "Only in files outside specified paths"

    I like the rule @Nickson created however, and think it's a good idea to add to prevent errors!

    方法 2:

    No one answered, so I decided to create a simple TSLint rule to handle this case: import‑blacklist‑extended

    Rule works fine in Nrwl monorepo, but it could be optimized and some mechanisms could be resolved better. Feel free to create issues and PRs on Github if any changes are needed for you.

    (by NickonDavid ShortmanNickon)

    參考文件

    1. Disallow barrel file imports within the same library in Nrwl Nx (CC BY‑SA 2.5/3.0/4.0)

#nrwl #webstorm #Angular #tslint #visual-studio-code






相關問題

Ng add @nrwl/workspace throws Cannot read property 'paths' of undefined (Ng add @nrwl/workspace throws Cannot read property 'paths' of undefined)

如何為非js框架創建原理圖? (How to create a schematic for non js framework?)

禁止在 Nrwl Nx 的同一庫中導入桶文件 (Disallow barrel file imports within the same library in Nrwl Nx)

如何強制 nrwl nx 尊重標籤更新? (How can I force nrwl nx to respect tag updates?)

將 Nx 工作區部署到 Google App Engine (Deploying Nx workspace to Google App Engine)

如何讓 Jest 正確轉換 node_modules/@nativescript/core?Jest + NativeScript + Angular + Nx (How can I get Jest to transpile node_modules/@nativescript/core properly? Jest + NativeScript + Angular + Nx)

使用 Nx 在 Jenkins 中進行 CI/CD 的最佳方式 (Best way for CI/CD in Jenkins with Nx)

如何使用短路徑在 Nx Workspace 中導入? (How to use short paths for importing in Nx Workspace?)

將 nx 與 angular.json 一起使用時使用哪個構建器 (Which builder to use when using nx with angular.json)







留言討論