miyabi-sun score 15878
2018/02/20 16:38 投稿
| > Laravelプロジェクト |
| 今回の質問で初めてわかったのですが、 |
| LaravelはNode.jsの[Webpack](https://webpack.js.org/)を利用してCSSやJSファイルを生成しているようです。 |
| そもそもLravelはPHPのWebサイトを構築するフレームワークなだけなので、 |
| Node.jsやnpmとは1ミリも関係ありません。 |
| そして`npm run dev`や`npm install`はプロジェクトルートに存在するpackage.jsonに記載されている内容に従って動作するだけですので、package.jsonがないと何にもアドバイスできません。 |
| [https://github.com/laravel/laravel/blob/master/package.json](https://github.com/laravel/laravel/blob/master/package.json) |
| いったいあなたは何を取ってきたんですか？ |
| 参考リンクを漁ったらLaravel Mixというプロジェクトを見つけました。 |
| これを導入してきた直後の状態ですかね？ |
| - [Laravel5.5をインストールしてLaravel Mixの実行まで](https://qiita.com/horikeso/items/39beb56b81b321a03f31) |
| - [JeffreyWay/laravel-mix](https://github.com/JeffreyWay/laravel-mix) |
| ```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" |
| } |
| } |
| ``` |
| --- |
| 以降は[Laravel Mix](https://github.com/JeffreyWay/laravel-mix)だったと決め打ちして回答します。 |
| package.jsonから一部抜粋します。 |
| 実際にWebpackを使ってJSやCSSファイルをコンパイルするとかなり大変です。 |
| そこで、Laravelでは開発者向けに簡単に使えるライブラリとドキュメントが用意されています。 |
| Laravel Mixというプロジェクトのようです。 |
| ```JSON |
| { |
| "name": "laravel-mix", |
| "version": "2.0.0", |
| "main": "src/index.js", |
| "scripts": { |
| "webpack": "NODE_ENV=development webpack --progress --hide-modules", |
| "dev": "NODE_ENV=development webpack --watch --progress --hide-modules", |
| "hmr": "NODE_ENV=development webpack-dev-server --inline --hot", |
| "production": "NODE_ENV=production webpack --progress --hide-modules", |
| "test": "nyc ava --verbose --serial", |
| "posttest": "nyc report --reporter=html" |
| }, |
| ... |
| } |
| [Laravel 5.5 アセットのコンパイル(Laravel Mix)](https://readouble.com/laravel/5.5/ja/mix.html) |
| プロジェクトルートにある[webpack.mix.js](https://github.com/laravel/laravel/blob/master/webpack.mix.js)を編集することで、 |
| ある程度ファイルの作り方を制御出来るようですね。 |
| ```JavaScript |
| mix.js('resources/assets/js/app.js', 'public/js') |
| .sass('resources/assets/sass/app.scss', 'public/css'); |
| ``` |
| `npm run dev`は`NODE_ENV=development webpack --watch --progress --hide-modules`のエイリアスのようですね。 |
| 前半部分は環境設定なのでコマンド名から見ると`webpack --watch --progress --hide-modules` |
| WebpackというJavaScriptファイル1個にするNode.js製のアプリを使って生成しているらしいことがわかります。 |
| --- |
| ざっとプロジェクト内を眺めたところ、このファイルを編集すればいけそうですね。 |
| [laravel-mix/src/config.js](https://github.com/JeffreyWay/laravel-mix/blob/master/src/config.js) |
| > [materialize](http://materializecss.com/)を入れたい |
| ドキュメントを見たところ、 |
| 自分でresourcesの各ファイルを編集してrequireして導入してくれという仕組みのようですね。 |
| `npm install materialize`で導入したJSやCSSのファイルは、 |
| package.jsonと同階層の`node_modules/materialize/`配下に存在すると思いますので、 |
| そこから無理やり持ってくれば導入出来るんじゃないかなぁと思います。 |
| [resources/assets/js/app.js](https://github.com/laravel/laravel/blob/master/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 |
| require('./bootstrap.js'); |
| require('materialize-css/dist/js/materialize.js'); |
| ``` |
| --- |
| 次にCSS側も導入していきましょう。 |
| JSと同じくresources配下のファイルを使って勝手にやってくださいという感じの仕様みたいですね。 |
| [resources/assets/sass/app.scss](https://github.com/laravel/laravel/blob/master/resources/assets/sass/app.scss) |
| SASSはCSSやSASSを自由にインポート出来ます。 |
| 書式は`@import 'ファイルパス';`ですが、node_modulesを勝手に見てくれるような機能はなかったと思いますので、 |
| `../../../node_modules/materialize-css/dist/css/materialize.css`みたいなパスで行けるんじゃないですかね？ |
| 何度か試行錯誤すれば設置出来るかと思います。 |
