Node.js、npm を使った開発方法がわからない。（node_modules）

Question

Node.js と npm 初心者です。
gulp もインストールしました。
###最終的にやりたいこと
PWA を作成して Firebase Hosting にデプロイ
###現状
Web Starter Kit と同じディレクトリ構成で PWA のレイアウトを Material Components で作成しています。
作っていくうちにディレクトリ構成が正しいのか不安になりました。
※以下記憶があいまいなところがあります。

プロジェクトフォルダ（web-starter-kit-x.x.x）で npm install して node_modules ができました。（package.json がここにあったので）
プロジェクトフォルダで gulp serve を実行してライブリロードできることを確認しました。
次に app フォルダ内の index.html を編集

<link rel="stylesheet"
          href="node_modules/material-components-web/dist/material-components-web.css">
・・・略・・・
<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
<script>mdc.autoInit()</script>

ここで localhost は /app なのだから上にある node_modules を参照できない。

プロジェクトフォルダをルートにして ../node_modules/ とすれば動くようにはなりますが、当然使うときに localhost/app/ となってしまいます。

###まとめると
わからないことだらけですが、

• ビルドやコンパイルなどの作業で /app 下に .js と .css を生成するのでしょうか。
• 完成品も node_modules を参照するのか。（app/scripts と app/styles に必要なファイルを生成して、不要になったりするのか）
• node_modules の正しい場所がわからない。
• 他、おかしいとところをご指摘ください。

Answer 1

ひとまず安心してください。
最後の〆以外はかなりイイところまで行っています。
少しの調整で綺麗なディレクトリ構成になりますので、座学→実践編の順にお付き合いください。

material-components/material-components-web
QuickStartの欄は非常にダメなサンプルなので、真似しないでください。

---

まず開発者である質問者さんは、CSSやJavaScriptファイルを何処に設置しなければならないか？
そもそもこれが定まらないと話にならないわけですね。

Node.jsのお約束として、
困ったときにはpackage.jsonやgulpfile.babel.jsといったファイルを見ましょう。
今回はディレクトリ構成がどうあるべきかという情報はgulpfile.babel.jsにバッチリ記載されていました。

CSSやSASSのファイルはL.86〜89にあるように、app/stylesディレクトリの配下に存在することを前提としています。

  return gulp.src([
    'app/styles/**/*.scss',
    'app/styles/**/*.css'
  ])

JavaScriptファイルはL.113にあるように./app/scripts/main.jsただひとつです。
次の行に// Other scriptsとか書いてありますが、ファイル同士を無理やりconcatでくっつけるだけのようなので、main.jsを起点に外部ファイルを読み込んで連携した方が筋が良いです。

    gulp.src([
      // Note: Since we are not using useref in the scripts build pipeline,
      //       you need to explicitly list your scripts here in the right order
      //       to be correctly concatenated
      './app/scripts/main.js'
      // Other scripts
    ])

---

もう少しgulpfile.babel.jsを読み進めましょう。

• CSS系: L.86〜102

SASSとしてコンパイルをした後に、dist/stylesに次々と吐き出しています

• JS系: L.109〜127

app/scripts/main.jsをbabelで変換掛けて縮小化した後にdist/scripts/main.min.jsとして出力しています
（ソースマップも吐き出していますのでデベロッパーツールで表示した時に何処でエラー吐いてるか全く分からん…ということもありません）

これがnode_modulesからCSSやJSファイルを連れてくる糸口になります。

---

node_modules配下のCSSファイルの持ち出し方。

Sassはご存知ですか？
素の芋っぽい書き方しか出来ないCSSと違って、変数やセレクタのネストが出来る超強化CSSです。
ただし、ブラウザはCSSしか読み込めないのでNode.jsでコンパイルしてCSSに変換かけてからデプロイします。

まぁ、そんなSASSですが、importという外部ファイルを読み込む超必殺技を持っています。
3-7 Sassの @import - Sassの教科書

app/styles/main.sassみたいなファイルを作っておいて…

@import '../../node_modules/material-components-web/dist/material-components-web.css'

これでdist/styles/main.cssを開けばnode_modules配下のCSSを持ち出せた事が確認出来るかと思います。

---

node_modules配下のJSファイルの持ち出し方。

CSSもSASS使って持ち出せるんだから、JSもなんかあるでしょ？
察しがいいですね、その通りです。

JavaScriptにはES2015というバージョンがありまして、
それのimport機能を使って外部のJSファイルにアクセスすることが出来ます。
import - Babel

importとexportは対になっていまして、
慣れるまでは少々難しいとは思いますがこれを機にES2015に関して色々と勉強してみてください。

material-components/material-components-webのトップページにあるように、この一文で取り出せるようになるかと思います。
import {checkbox as mdcCheckbox} from 'material-components-web';

Comments

[fm311_engineer]

gulpfile.babel.js に何が書いてあるのかなんとなくですが、理解しました。
SASS も書いたことがありませんが、どのようなものなのかはわかりました。
gulp.babel.js の 92 行目でコンパイルらしきことをしているので、別で設定やコンパイル作業をする必要はないのでしょうか。

CSS
app/styles/main.sass ファイルを作成後、中に
@import '../../node_modules/material-components-web/dist/material-components-web.css'
を記述しましたが、app/styles/main.css の更新日時は変わっていませんでした。
dist/sytles/main.css は更新日時は変わっているものの、dist/index.html を開いても material components が反映されていませんでした。

JavaScript
import {checkbox as mdcCheckbox} from 'material-components-web';
は app/scripts/main.js の上のほうに記述すればよろしいのでしょうか。

HTML
app/index.html の CSS と JavaScript は
<link rel="stylesheet" href="styles/main.css">
・・・略・・・
<script src="scripts/main.min.js"></script>
<script>mdc.autoInit()</script>
だけにすればよろしいのでしょうか。

Answer 2

node_modulesはubuntuだと/usr/local/lib直下にあります。expressなどをインストールしていれば、そこに同じくあるはずです。
localhostのURL指定で参照されるディレクトリはあなたがサーバウェアの設定ファイルに書いたドキュメントルートです。（apacheならhttpd.conf）

私はworkディレクトリ(usr/localとはまったく別のディレクトリを切って)直下にapp.jsを置いてますが、

sudo node app.js

で問題なく動かせています。htmlやcssに関してもworkディレクトリに置いとけば動くはずです。これはnode.jsうんぬんではなくlinuxのディレクトリサービスの話なので、linux本などでそのあたりを学習してみてください。