1. ホーム
  2. npm

[解決済み] package.json の 'files' と 'directories' プロパティはどのように使用するのですか?

2023-06-26 15:21:36

質問

もし package.json には files プロップ、および/または directories プロップがあります。

  "files": [
    "./src/assets/fonts/"
  ],
  "directories": {
     "assets:": "./src/assets"
  }

それらを利用する方法にはどのようなものがありますか?ドキュメントには、一度指定したものをどのように利用できるかは記載されていません。

例えば ファイル ドキュメント と言う。

files"フィールドは、プロジェクトに含めるファイルの配列です。配列の中にフォルダ名を指定すると、そのフォルダ内のファイルもインクルードされます。

include in your project"とはどういう意味ですか?どこにインクルードするのですか?以前はアクセスできなかったものが、今はどのようにアクセスできるのですか?

プロジェクトに ディレクトリセクション と、ドキュメントには書かれています。

将来的には、この情報は その他 クリエイティブな方法で使用される可能性があります。

既存のクリエイティブな方法とは?

どのように解決するのですか?

include in your project"とは、以下のような場合に作成されるパッケージのtarballに含まれることを意味します。 npm publish . また npm pack を実行して、実際に公開をトリガすることなく、検査用の tarball を生成することもできます。この方法では、生成された tarball を実際に開いて、どのファイルが含まれたか/含まれなかったかを検査することができます。

一方 .npmignore (または .gitignore がない場合は、代理人として .npmignore がない場合は、無視するファイルのブラックリストとして機能します (これにより、デフォルトでは他のすべてを含みます)。 files 配列はホワイトリストです。つまり、デフォルトですべてを含むのではなく、もし files 配列が指定された場合、デフォルトではすべてが除外され、 明示的にリストされたファイルのみがパッケージ化された tarball に含まれることになります。

例として、あなたのパッケージがブラウザで消費されることを意図したライブラリであるとします。あなたのコードは lib/ にあり、ブラウザ互換のライブラリにコンパイルするために browserify を実行します。 dist/index.js . にリストされたファイルの束から始めます。 .gitignore にリストされたファイル群から始めますが、これは事実上の .npmignore は存在しません。しかし、今、その dist/ が生成されたファイルでいっぱいになった今、それらを git リポジトリから無視したいと思うでしょう。もしそれらを .gitignore に追加すると、それらは git repo から除外されます。 から除外されますが、パッケージの tarball からも無視されます。 . そこで、2つの選択肢があります。 .gitignore.npmignore と同じですが、リストだけ dist/.gitignore . このようにすると、2つのファイルをほとんど、しかし完全に同期させておく必要があります。この方法は退屈で、エラーが起こりやすいものです。

もう一つの選択肢は .npmignore を持たず、代わりにパッケージ内で実際に必要なファイルだけを files の配列に記述します。 README.* , package.json , CHANGELOG.* (たぶん他のいくつか) は関係なく自動的に tarball に含まれます。ですから、単に "files": [ "dist" ] を追加すれば完了です。これで、あなたのパッケージの tarball には lib にあるオリジナルの JS は含まれませんし、また tests/ などの代わりに、実際にコンパイルされた lib を dist/ .

については directories については、私は通常 lib (es5の場合)を使用します。 src (es6、coffeescript、typescript などのソースの場合)。 dist (ブラウザまたは VM 固有のビルドの場合)。 test , output (カバレッジレポートなどの一時的に生成されるファイル用)。 doc などです。このプロパティはnpmや他のツールでは直接使用されませんが、ディレクトリ構造を明示的にします。また、npmスクリプトでディレクトリを参照できるようにするために、以下のようにします。

"scripts": {
  "clean": "rm -rf $npm_package_directories_dist $npm_package_directories_output",
  "lint": "eslint $npm_package_directories_src",
  "test": "teenytest $npm_package_directories_test",
}

この方法では、ディレクトリは一度だけ指定され、もし変更されても、(package.json全体にたくさんあるのではなく)一カ所だけ変更すればよいのです。