BETA

【Laravel-mix】windows上のvagrant環境でnode_modulesにシムリンクを張る

投稿日:2018-11-24
最終更新:2018-11-24

windows上のvagrant環境では共有フォルダに制限がある。
シムリンクを貼れなかったり、パス文字長の制限など。

そこでnode_modulesディレクトリ自体にシムリンクを貼り、解決を図った。
環境はLaravel5.6

cd app_root
mkdir ~/node_modules
ln -s ~/node_modules ./node_modules
npm install

これで「--no-optional」や「--no-bin-links」などのオプションなしにスムーズにインストールできる。
次にLaravel-mixがパスを解決できなくなるので、それを解決する。

エラー内容

npm run dev

Error: Cannot find module '/home/forge/XXXX/storage/app/webpack.mix'

「webpack.config.js」をプロジェクトのルートにコピーする。

cp ./node_modules/laravel-mix/setup/webpack.config.js ./webpack.config.js

設定を変更

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
 */

 //※パス変更
let mix = require(__dirname + '/node_modules/laravel-mix/src/index');

 //※パス変更
let ComponentFactory = require(__dirname + '/node_modules/laravel-mix/src/components/ComponentFactory');

new ComponentFactory().installAll();

 //※パス解決
Mix.paths.setRootPath(path.resolve(__dirname));

require(Mix.paths.mix());

/**
 * Just in case the user needs to hook into this point
 * in the build process, we'll make an announcement.
 */

Mix.dispatch('init', Mix);

/**
 * Now that we know which build tasks are required by the
 * user, we can dynamically create a configuration object
 * for Webpack. And that's all there is to it. Simple!
 */

 //※パス変更
let WebpackConfig = require(__dirname + '/node_modules/laravel-mix/src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

次にルートにコピーされた「webpack.config.js」を参照してnpmタスクを実行するように、
「package.json」を修正する。

--config=node_modules/laravel-mix/setup/webpack.config.js

上の記述を下記のように修正する。全部で5箇所ある。

--config=webpack.config.js

これで完了。

>> npm run dev
DONE Compiled successfully in 8335ms

MACでは普通に行けるので、プロジェクトメンバーにmacやwindowsが混在していると動きにくくなるけど、
まぁ今回はしょうがないでしょう。

ていうかシムリンクなのかシンボリックリンクなのかよくわかっていない

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@rtrx8の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!