結論 🧑🏫
業務に導入する場合
コミュニティの規模を考えて、dependency-cruiserで実現する方が妥当だと思いました。
npmtrends
| ライブラリ | 2024/3/10週 Download数 |
|---|---|
| dependency-cruiser | 310,506 |
| eslint-plugin-strict-dependencies | 18,340 |
| eslint-plugin-import-access | 18,715 |
個人開発
eslint-plugin-strict-dependenciesが以下の理由で妥当だと思いました。
eslint-plugin-import-accessが以下の理由で妥当だと思いました。
- エディタ上で不正なimportをした場合にすぐ検知される
- 設定が簡単（
defaultImportability: 'package'）
1. 背景 🖼️
最近の業務ではfeaturesディレクトリで開発しています。
TypeScirptではexport宣言した変数や関数は全てのファイルからimportできてしまいます。
これにpackage-privateの機能を組み合わせれば外部のディレクトリからimportを制限できたり、モジュール管理がしやすくなると思い調査しました。
2. package privateを実現する方法
2.1. dependency-cruiser 🚢
以前こちらの「4.2 package private のような設計を作る」で紹介しましたのでご覧ください。
使い方
例：_から始まるファイルは同階層に置かれたファイルからのみimport可能
fromがimport(require)する側で、toがexportする側です。
pathがルールを適用するファイルパスで、pathNotが適用されないファイルパスです。
module.exports = {
forbidden: [
{
name: `'_'から始まるファイルは同階層に置かれたファイルからのみimport可能`,
severity: 'error',
from: { path: ['(.*)\\/.*\\.ts$'], pathNot: ['.*\\.spec\\.ts$'] },
to: {
path: ['.*\\/_\\w+.ts$'],
pathNot: ['$1\\/_\\w+.ts$'],
},
},
]
2.2. eslint-plugin-import-access 🚨
uhyoさんが作られたライブラリです。
使い方
export宣言されているものにJSDoc で@packageとアノテートする
/**
* @package
*/
export const fooPackageVariable = "I am package-private export";
こちらで使い方を取り上げてますので良かったらご覧ください。
2.3. eslint-plugin-strict-dependencies 🚨
ナレッジワークさんが作られたライブラリです
こちらで使い方を取り上げてますので良かったらご覧ください。
使い方
src/domains/sample 配下のpackage privateを実現する例です。
'strict-dependencies/strict-dependencies': [
'error',
[
{
module: 'src/domains/sample',
allowReferenceFrom: ['src/domains/sample'],
},
],
],
3. 3つのライブラリを比較する 🤔
業務に導入する場合と個人開発で分けました。
業務に導入する場合
dependency-cruiserが妥当と思いました。
勿論以下のデメリットはあります。
- 設定ファイルに慣れる必要があります
- コマンド実行するまでは意図しない依存関係を検知できないです
理由
コミュニティの規模です。
| ライブラリ | 2024/3/10週 Download数 |
|---|---|
| dependency-cruiser | 310,506 |
| eslint-plugin-strict-dependencies | 18,340 |
| eslint-plugin-import-access | 18,715 |
個人開発
eslint-plugin-strict-dependenciesが以下の理由で妥当だと思いました。
eslint-plugin-import-accessが以下の理由で妥当だと考えました。
理由
-
エディタ上で不正なimportをした場合にすぐ検知されます
dependency-cruiserだとコマンドで実行してから検知されます
ここまではeslint-plugin-import-accessも同様のメリットです -
設定が簡単
- eslintの設定ファイルでディレクトリごとの依存関係を丸々指定できます
-
eslint-plugin-import-accessは
package-privateに特化しています
しかし、ディレクトリごとカプセル化したい場合にはやや手間かなと思いました
各ファイル、各export宣言の箇所にコメントをつけることを忘れずにする必要があります
defaultImportability: 'package'により、package-privateをデフォルトで適用してくれるので設定がとても楽です
今後のeslint-plugin-strict-dependencies、eslint-plugin-import-accessの更なる普及を期待します！
4. 参考 ✨
- EsLintのルールを幾つ知っていますか？
- eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
- TypeScriptプロジェクトでディレクトリ単位のカプセル化をする
- React+TSプロジェクトで便利だったLint/Format設定紹介
- eslint why does my plugin show Definition for rule was not found?
- Reactのディレクトリ構造パターン例
- 【Marp】ページの表示を (現在ページ)／(総ページ数) にしたい
5. 最後に 💪
- package-privateを実現すれば、依存関係を整理しやすくしてデグレリスク解消や、開発効率の向上につながるのでおすすめです
- コメントで助言いただけると助かります😂
本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏