Laravel Mixをインストールする

kuro

3 minute read

Laravel Mixをインストールする

Laravel Mixをインストールする上で詰まった部分をメモしておきます。

環境：Windows10, Vagrant, Docker

最初から以下のようにコマンドを叩いていけば楽だったかもしれない。。。( ;∀;)

npm install -g n
n latest
node -v
npm install @babel/core@^7.0.0 --no-bin-links
npm install --no-bin-links
npm run dev

nodejsのバージョン管理システム n を導入してnode.jsをアップグレードする

vagrant ssh => docker exec -it (phpのコンテナ) bash => cd src/example(作業するLaravelのディレクトリ) で作業しているLaravelプロジェクトのルートまで行き、npmで n を導入します。
まず stable （安定板）をインストールします。

npm install -g n
n stable
node -v

安定板のバージョンに変わっていなければexitしてからもう一度入り直すと、変更が確認出来ました。

node -v : (stable版になっている)

laravelのルートディレクトリ（src/example）でlaravel mixをインストール

npm install

Vagrant内でインストールする場合は、以下のように–no-bin-linksをつけると良いです。

npm install --no-bin-links

私の場合stable版だとエラーが出て先に進めなかったので、nodeとnpmをlatest(最新版)にしました。
n latest 一回では最新版にならない場合もありましたので、先に最新版のバージョンを確認しましょう。

n --latest

n latest
n --latest // 最新版と照らし合わせて確認

latest版にして、laravel mixをインストールに再挑戦。

npm install --no-bin-links

npm WARN @babel/plugin-transform-named-capturing-groups-regex@7.4.4 requires a peer of 
@babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-regenerator@7.4.4 requires a peer of 
@babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.0.5 requires a peer of 
@babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.

audited 16913 packages in 44.19s
found 0 vulnerabilities

どうやら、@babel/core@^7.0.0 は自分でインストールする必要があったので、自動で依存解決できない部分は手動でインストールしました。

npm install @babel/core@^7.0.0 --no-bin-links

インストール再々挑戦で、laravel-mixの導入完了しました。

npm install --no-bin-links

ビルドする

npm run dev

エラーを吐かれました。

> @ dev /src/example
> npm run development


> @ development /src/example
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

events.js:173
      throw er; // Unhandled 'error' event
      ^

Error: spawn node_modules/webpack/bin/webpack.js ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:248:19)
    at onErrorNT (internal/child_process.js:431:16)
    at processTicksAndRejections (internal/process/task_queues.js:83:17)
    at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:58:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:828:11)
    at internal/main/run_main_module.js:17:11
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)
    at onErrorNT (internal/child_process.js:431:16)
    [... lines matching original stack trace ...]
    at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-04-28T10_40_32_876Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-04-28T10_40_32_919Z-debug.log

Laravelのプロジェクトルートにあるpackage.jsonを修正しました。

    "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": "npm run development -- --watch",
        "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"
    },

以下の部分を

cross-env

↓

node node_modules/cross-env/dist/bin/cross-env.js

上記のように書き換えます。
以下のようになるはずです。

    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "node node_modules/cross-env/dist/bin/cross-env.js 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": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

再度、コマンドを叩くと上手くいきました。

npm run dev

もしかしたら、cross-envがインストールされていない場合もあるので、以下も試してみてください。

npm install --save-dev cross-env

DockerやVagrantを使っていて上手くできなかったらこれです。

npm install --save-dev cross-env --no-bin-links

以上です。(´▽｀)(´▽｀)(´▽｀)

↓ Maybe NOT correct way, just a MEMO ↓
↓ 説不定不對的辦法，就是筆記而已 ↓
以下はたぶん正しくないですが、これで上手くいったこともあったので、メモしておきます。

関連ファイルを削除してやり直しました。

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force

npm install --no-bin-links

npm run dev

調べるとコードエディタなどを開いていると上手くいかないと言う方がいたので、VSCodeを閉じて、 npmを更新し、再度インストールしました。

npm update
npm install --no-bin-links
npm run dev