Table of Content
npmパッケージのプラグイン間における共有
npmの基本的な使用方法については、他のブログに譲ります。
ここでは、1目のプラグインを@wordpress/create-blockでプロジェクト生成してから、どのようにして2つ目のプラグインのプロジェクトを生成していくかということに焦点を絞ります。npx @wordpress/create-block
プロジェクトを生成すると、そこにはWeb Packによるトランスパイル環境が整います。それで基本的なnpmの利用環境が整うといっていいと思います。
我々開発者はその環境が整ったうえでedit.jsやsave.jsといったJavaScriptファイルを加工していくのですが、複数のプラグインを作成するとすれば、その度にnpx @wordpress/create-block
を実行して別々の開発環境を作ってきました。
そして、複数のプラグインで共通に利用したいモジュールはnpmパッケージにまとめ、それぞれインストールしていました。
しかし、これだとnpmパッケージをバージョンアップする度に、すべてのプラグインでnpm installを実行しなければなりません。npmパッケージが1つならまだいいですが、複数になると手間が大変です。そもそも、他に依存しているnpmパッケージもあるはずで、@wordpress/scripts
という依存関係にかかわる根幹のパッケージは必ず使っているはずです。このパッケージもバージョンアップしているんです。
これを何とかする方法はないかと色々調べました。そもそも、モジュールはプラグイン内のimport文でインポートします。自分で作ったモジュールをimportするときは、そのモジュールが含まれるjsファイルのパスを指定するのですが、npm install
でインストールしたパッケージにはパスがありません。
まったく基本的な話でしょうが、パッケージ名にパスがない場合はnode_modulesフォルダ内を探しにいくのです。
では、このnode_modulesフォルダはどこのフォルダ内のnode_modulesフォルダでしょうか?
Claude3が回答をくれました
edit.jsファイル内でimport { useBlockProps } from ‘@wordpress/block-editor’;と記述した場合、ビルドプロセスは以下の手順でuseBlockPropsモジュールを探します。
- まず、プラグインフォルダ(/my-project/plugins/my-plugin/)内のnode_modulesフォルダを探します。
- プラグインフォルダ内にnode_modulesフォルダが見つからない場合、ビルドプロセスは親ディレクトリを順番に遡ります。この例では、プロジェクトのルートディレクトリ(/my-project/)まで遡ります。
- プロジェクトのルートディレクトリにあるnode_modulesフォルダ内で@wordpress/block-editorパッケージを探します。
- パッケージが見つかったら、そのパッケージ内でuseBlockPropsモジュールを探します。
- モジュールが見つかったら、そのコードを含むファイルを特定し、バンドルプロセスに含めます。
そうすると複数のプラグインで共通のnpmパッケージを利用したいのであれば、wp-contentフォルダにnode_modulesをつくり、そこでnpmインストールでパッケージをインストールすれば、それぞれのプラグインは共通の上位フォルダであるwp-contentフォルダのnode_modulesを見に行ってくれるということになります。
具体的にはwp-contentフォルダに移動して、ターミナルから
npm install @wordpress/scripts
を実行します。そうすると、wp-contentフォルダ内にpackage.jsonが生成されるとともに、node_modulesフォルダも生成され、そこにブロック作成に必要なモジュールが詰め込まれます。
さらに、すべてのプラグインで使用するnpmパッケージをnpm install
でインストールすれば、そのモジュールも、wp-contentフォルダ内のnode_modulesフォルダに格納されます。
そうしておけば、各プラグインでは共通のnpmパッケージをインストールする必要はないのです。
itmaroon へ返信する コメントをキャンセル