前提

npm初心者です。数刻前にはじめました。
node_moduleなにそれ？な状態です。

環境

Windows10 64bit
Firefox Developer Edition 59.0b10 (64 ビット)
npm 5.6.0
Node v9.5.0
Laravel 5.5

やりたいこと

Laravelプロジェクトに、npmを使ってJSライブラリを色々入れたいと考えています。
最初はmaterializeを入れたいのですが、どうも使い方がわかりません。

やったこと

Laravelプロジェクトに、materializeを入れようと思い、
以下のコマンドをLaravelプロジェクトのルートフォルダで実行しました。

npm install materialize-css
npm install
npm run dev

インストールはエラーなく終わったようですが、
/public/js/app.js及び、/public/css/app.cssは作成されるのですが、
Laravel標準のvue.jsのみしかパッキング（？）されていないように思います。

実際、materializeの以下のクラスを読み込んでみても反映されませんでした。

html
1<span class="red lighten-3">hogehoge</span>

質問

npmでのインストールの流れは上記コマンドの流れであっていますでしょうか？
npmでのコンパイル後、/public/js/app.js及び、/public/css/app.cssにすべてのデータがパッキング（？）され、それを読み込むだけでよろしいのでしょうか？
なぜmaterializeが読み込まれないのでしょうか？

以上、ご存知の方がいらっしゃいましたらご教示いただけますと幸いです。

参考

追記

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "materialize-css": "^0.100.2",
        "node-dev": "^3.1.3"
    }
}

行動規範の内容に同意します

回答2件

今回の質問で初めてわかったのですが、
LaravelはNode.jsのWebpackを利用してCSSやJSファイルを生成しているようです。

https://github.com/laravel/laravel/blob/master/package.json

JSON
1{
2    "private": true,
3    "scripts": {
4        "dev": "npm run development",
5        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
7        "watch-poll": "npm run watch -- --watch-poll",
8        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
9        "prod": "npm run production",
10        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
11    },
12    "devDependencies": {
13        "axios": "^0.17",
14        "bootstrap": "^4.0.0",
15        "popper.js": "^1.12",
16        "cross-env": "^5.1",
17        "jquery": "^3.2",
18        "laravel-mix": "^2.0",
19        "lodash": "^4.17.4",
20        "vue": "^2.5.7"
21    }
22}

実際にWebpackを使ってJSやCSSファイルをコンパイルするとかなり大変です。
そこで、Laravelでは開発者向けに簡単に使えるライブラリとドキュメントが用意されています。
Laravel Mixというプロジェクトのようです。

Laravel 5.5 アセットのコンパイル(Laravel Mix)

プロジェクトルートにあるwebpack.mix.jsを編集することで、
ある程度ファイルの作り方を制御出来るようですね。

JavaScript
1mix.js('resources/assets/js/app.js', 'public/js')
2   .sass('resources/assets/sass/app.scss', 'public/css');

materializeを入れたい

ドキュメントを見たところ、
自分でresourcesの各ファイルを編集してrequireして導入してくれという仕組みのようですね。

resources/assets/js/app.js

require('./bootstrap.js');の行の次の行にでも差し込んであげれば良いかと思います。
何を？調べていきましょうか。

実際にnpm install materialize-cssで導入したところ、
node_modules/materialize-css/dist/js/materialize.jsというファイルがありました。
その14行目にjQuery = $ = require('jquery');という記述があるように、jQueryが宣言されていなければ自分で勝手に導入してくる仕様のようです。

更にnode_modules/materialize-css/package.jsonにjQueryが依存モジュールとして定義されているので、materialize.jsを呼べば解決のようですね。
Node.jsのrequireは./等のディレクトリパスからスタートすると既存のディレクトリをベースに探しに行きますが、
いきなり名前から始まるとnode_modules配下のディレクトリからパッケージを探します。
従って下記のように修正すれば導入出来るかと思います。

JavaScript
1require('./bootstrap.js');
2require('materialize-css/dist/js/materialize.js');

次にCSS側も導入していきましょう。
JSと同じくresources配下のファイルを使って勝手にやってくださいという感じの仕様みたいですね。

resources/assets/sass/app.scss
SASSはCSSやSASSを自由にインポート出来ます。
書式は@import 'ファイルパス';ですが、node_modulesを勝手に見てくれるような機能はなかったと思いますので、
../../../node_modules/materialize-css/dist/css/materialize.cssみたいなパスで行けるんじゃないですかね？

何度か試行錯誤すれば設置出来るかと思います。

投稿2018/02/20 06:18

編集2018/02/20 07:38

miyabi-sun

総合スコア21158

nnahito

2018/02/20 06:39

ご回答ありがとうございます。 > いったいあなたは何を取ってきたんですか？名前の表記がよくなかったようですね。 composer create-project --prefer-dist laravel/laravel projectname を実行し、その階層でnpm installをかけただけです。 laravel-mixに関しましては、今はじめて知りました。すこしいじってみます

miyabi-sun

2018/02/20 06:57

なるほどなるほど、確かに最新の純正LarabelはNode.jsで静的ファイルを生成する仕様になっているようです。これは完全に私の勉強不足が問題で申し訳ないです。 Laravelの公式ドキュメントを参照すると、下記のページから色々と触れるようです。 https://readouble.com/laravel/5.5/ja/frontend.html https://readouble.com/laravel/5.5/ja/mix.html 回答を更新しておきますが、それまでは上記のサイトを元に勉強をすすめてみてください。

nnahito

2018/02/20 07:24

ご返信ありがとうございます。今気がついたのですが、 npm install materialize-css を実行すると、 but none is installed. You must install peer dependencies yourself. と出ておりました。。。依存環境のあるものを入れろとのことでしょうが、何が依存関係に有るか…… どのようにして調べるのでしょうか？

miyabi-sun

2018/02/20 07:49

回答編集しました。このコマンドを実行したのはどのディレクトリかわかりますか？基本的にpackage.json配下で実行するものなので、package.jsonが存在しないディレクトリで実行しようとするとエラー等が発生する可能性があります。

nnahito

2018/02/20 10:08

ご回答誠にありがとうございます。こちら、 resource/assets/js/app.js及びresource/assets/sass/app.cssは、 HTMLから参照できないように思われます。なので、public配下にもapp.js及びapp.cssが作成されると思うのですが、 npm run dev を実行した時に、始めてresource配下もpublic配下も作成されます。自分のイメージとしては、 npm install（必要なライブラリを取ってくる） ↓ npm run dev（ライブラリを一つにまとめる）ですが、ここまでは正解でしょうか？とすると、参照できるフォルダ（public配下）以外に作成されるファイル群は何のために有るのでしょうか。初歩の初歩で申し訳ございませんが、こちらもご教示いただけますと幸いです。

miyabi-sun

2018/02/20 10:28

根本的な所として、下記の事がいえます「Node.jsはJavaScriptのスーパーセットである」「SASSはCSSのスーパーセットである」スーパーセットは「完全上位互換」の事です。例えばNode.jsやSASSには、本来のJSやCSSでは使えない機能や、便利で簡素な書き方が利用できます。当然不便な素のJSやCSSで誰も開発したくありません。ですが、ブラウザが認識するのはJS・CSSだけです。そこで機能の作り込むフェイズではNode.js・SASSで行います。機能が完成して公開するタイミングでこれらのファイルをJSやCSSに変換してから公開するのです。「npm install（必要なライブラリを取ってくる）」これは正解です。「npm run dev（ライブラリを一つにまとめる）」これはNode.jsやSASSを公開前に変換するという主目的があるので半分間違い、ライブラリを一つにまとめるのはJSやCSSに別ファイルを読み込む機能が無いので無理やりくっつけているに過ぎません。 resourcesは開発領域 publicは公開領域、つまり開発領域で開発された機能が変換された時に初めて生まれます。本番環境へのデプロイはこの生成されたpublic配下のファイルを使って行われます。

nnahito

2018/02/20 15:10

ご返信ありがとうございます。 > 「npm run dev（ライブラリを一つにまとめる）」これはNode.jsやSASSを公開前に変換するという主目的があるので半分間違い、 > ライブラリを一つにまとめるのはJSやCSSに別ファイルを読み込む機能が無いので無理やりくっつけているに過ぎません。なるほど、そちらがメインの処理なのですね。 > resourcesは開発領域 > publicは公開領域なるほど……開発領域なのですね。つまり、開発だとJSのパスなどは/resourceから始めるのが正しい形位でしょうか？スクリプトタグでやってみたのですが、読み込めず…… Laravelの場合は、Publicフォルダに移動させる感じでしょうか？

行動規範の内容に同意します