Laravel Mixがあればnode_modulesは必要ない？
解決したいこと
npmでインストールしたライブラリの読み込みがされない。
参考にしたサイト
https://biz.addisteria.com/laravel_deploy_nodejs/
この記事に読みますと、
- デプロイする時に、サーバーにはNodeは必要ないということと理解しました。
- ということはnode_modulesも必要ない（npm installの時に作られるから）
- ということは、
npm run devでnode_modulesをコンパイルして、public/js/app.jsに入ってくる？？
そして結果は、入ってきてなさそう。。。
そもそもの理解が間違っているかとは思いますが、いまいち原因や調査方法がわからず質問させていただきたいと思います。
発生している問題・エラー
前提
開発環境
- Laravel8
- PHP8
- node v12.22.12
やったこと
開発環境で、マークダウンをHTMLに変換するパッケージ（spatie/laravel-markdown)をインストール。
合わせて、shikiというライブラリをnpmでインストールが必要そうだったのでインストール。
※このshikiが読み込まれていない・・・？
以下、関係のありそうな作業の流れです。
- laravel/ui（Bootstrap）を導入
- この時にlaravel-mix入ってきた（？）
- npm i shiki（ライブラリをインストール）
- npm run dev（コンパイル）
現象
レンタルサーバーにデプロイすると、ライブラリが読み込まれていないようです。
試したことは
- nodeをインストール
- npm install
- npm run dev
node_modulesがある状態でもうまく読み込めていないようです。
↓↓デプロイしたやつ
※node_modulesがある状態でも、ない状態でも同じ
↓↓開発環境のやつ
※node_modulesがある状態
※ない状態だと、デプロイしたやつと同じ表示
該当するソースコード
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@popperjs/core": "^2.10.2",
"axios": "^0.21",
"bootstrap": "^5.1.3",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^5.0.0",
"sass": "^1.32.11",
"sass-loader": "^11.0.1"
},
"dependencies": {
"autoprefixer": "10.4.5",
"shiki": "^0.10.1"
}
}
composer.json
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
"php": "^7.3|^8.0",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.75",
"laravel/sanctum": "^2.11",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.4",
"spatie/laravel-markdown": "^2.2"
},
"require-dev": {
"barryvdh/laravel-debugbar": "^3.6",
"facade/ignition": "^2.5",
"fakerphp/faker": "^1.9.1",
"friendsofphp/php-cs-fixer": "^3.8",
"laravel/sail": "^1.0.1",
"mockery/mockery": "^1.4.4",
"nunomaduro/collision": "^5.10",
"nunomaduro/larastan": "^1.0",
"phpmd/phpmd": "@stable",
"phpstan/phpstan": "^1.6",
"phpunit/phpunit": "^9.5.10"
},
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/"
}
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-update-cmd": [
"@php artisan vendor:publish --tag=laravel-assets --ansi --force"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
自分で試したこと
「larave-mix node_modules」などで調べてみましたら、参考にしたサイトに行きつきました。
node_modulesだけでなく、nodeのサーバーには必要ないんだと。
でも、うまく表示されない。。。
ご知見のある方、ご教授いただけますと幸いです。
よろしくお願いいたします。
0