npm dedupeでモジュールの重複を解消する

フロントの開発をしている際に独自のライブラリを集めたローカルのモジュールを作成することがあります。
そんなときにローカルモジュールで依存しているモジュールと、使う側でのモジュールが重複してしまうことがあります。

たとえば以下のような構成

parent (depends on hoge@1.0.X)
 ├ node_modules
 |  └ hoge@1.0.7
 └ local_modules
    └ child (depends on hoge@~1.0.9)
       └ node_modules
          └ hoge@1.0.10

モジュールによっては重複してバンドルしてしまうと思わぬ動作をしてしまいます。
(自分の環境ではVue.jsが重複してバンドルされてしまいエラーとなった )

そんな重複を解決してくれる便利コマンドが**npm dedupe**です。
https://docs.npmjs.com/cli/dedupe

上記の構成でnpm dedupeを実行すると以下のように解消してくれます。

parent (depends on hoge@1.0.X)
 ├ node_modules
 |  └ hoge@1.0.10
 └ local_modules
    └ child (depends on hoge@~1.0.9)

注意点としてはローカルモジュールをwebpack等を使ってビルドする際に依存モジュールを外から読み込むように設定してください。
ビルドされたjsファイルにモジュールが含まれてたら意味ないですからね

webpackでモジュールを外部参照する方法はexternalsを参照

おまけ

npmじゃなくてyarn使えば重複はない

参考サイト

http://yosuke-furukawa.hatenablog.com/entry/2014/06/10/100410
https://docs.npmjs.com/cli/dedupe
https://qiita.com/youkaiantena/items/be4fb46ac7f5af2de2fb
https://yarnpkg.com/lang/en/docs/cli/dedupe/