gulpでのnode_moudules階下の取り扱いについて

Question

gulpでjqeuryをCDNではなく、インストールして利用しようとする場合に

npm i -S jquery

とした後にnode_modules階下にjqueryファイルがインストールされるが
それを使おうと思った場合に

①scriptに以下のような文を書くとサーバーにアップする際に困る

<script src="../node_modules/jquery/dist/jquery.min.js></script>

②手動でファイルを取り出してdist/assets/js/フォルダに設置する。
ファイル構造としては以下の通りです。

project
  dist(サーバーにアップする)
　　 index.html
    assets
  gulpfile.js
  node_modules
    jquery(インストールした)
  package.json
  dev(開発環境)
    index.html
    assets

③gulpファイルでdistに吐き出す
これだとjquery以外にも増えた場合にその都度記述が必要

gulp.src('./node_modules/jquery/dist/jquery.min.js')
.pipe(gulp.dest('./dist/assets/js/');
コード

これらの方法では非効率なように感じるのですが
何かいい解決策はないでしょうか？

Comments

[maisumakun]

jQuery本体以外のコードはどのように書いていますか？

Answer 1

npm installしたブラウザ用のライブラリを使用するときはimportを使用します。

import $ from 'jquery';

ただ、import文は通常のブラウザでは動かないのでBabelを使用してJSをコンパイルするといいです。
https://www.npmjs.com/package/gulp-babel