質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

npmの使い方 with Laravel5.5

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,984

nnahito

score 1836

 前提

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の以下のクラスを読み込んでみても反映されませんでした。

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

 質問

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

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

 参考

  • https://qiita.com/hashrock/items/15f4a4961183cfbb2658
  • http://fridles.xyz/articles/39

 追記

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"
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

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

https://github.com/laravel/laravel/blob/master/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": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    }
}

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

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

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

mix.js('resources/assets/js/app.js', 'public/js')
   .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配下のディレクトリからパッケージを探します。
従って下記のように修正すれば導入出来るかと思います。

require('./bootstrap.js');
require('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 19: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配下)以外に作成されるファイル群は何のために有るのでしょうか。
    初歩の初歩で申し訳ございませんが、こちらもご教示いただけますと幸いです。

    キャンセル

  • 2018/02/20 19: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配下のファイルを使って行われます。

    キャンセル

  • 2018/02/21 00:10

    ご返信ありがとうございます。

    > 「npm run dev(ライブラリを一つにまとめる)」これはNode.jsやSASSを公開前に変換するという主目的があるので半分間違い、
    > ライブラリを一つにまとめるのはJSやCSSに別ファイルを読み込む機能が無いので無理やりくっつけているに過ぎません。

    なるほど、そちらがメインの処理なのですね。

    > resourcesは開発領域
    > publicは公開領域
    なるほど……開発領域なのですね。
    つまり、開発だとJSのパスなどは/resourceから始めるのが正しい形位でしょうか?
    スクリプトタグでやってみたのですが、読み込めず……
    Laravelの場合は、Publicフォルダに移動させる感じでしょうか?

    キャンセル

+1

私もあまり詳しくはないのですが…
Laravel Mixを活用してみては如何でしょうか?

参考URL

このサイトを参考にして、Laravel Mixをインストール後にpackage.jsonを修正していった方が簡単かもしれませんよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る