Laravel Non-LaravelプロジェクトでLaravel Mixを使用する方法

このチュートリアルは、Laravelフレームワーク以外のプロジェクトでの資産編集のために、合理化されたWebpack APIラッパーであるLaravel Mixを活用する方法を示しています。 このアプローチは、広範なWebpack構成の必要性を排除することにより、プロジェクトのセットアップを大幅に加速します。

主要な利点：

単純化された資産編集：
• laravelミックスは、ウェブパックの複雑さを簡素化し、アセット処理（javascript、cssなど）をはるかに簡単にします。>
迅速なプロジェクトのセットアップ：
• ビルドツールの構成に費やす時間を短縮し、アプリケーションの構築時間を増やします。 WebPack構成不要：
LARAVEL MIXは、WebPack構成を処理し、個別の
• ファイルの必要性を排除します。 webpack.config.js前提条件：

node.jsおよびnpm：

ランラベルミックスを実行するのに不可欠です。

および
• 。でインストールを確認します node -vphp and Composer（オプション）：バージョン化とホットリロード機能に必要です。 Homesteadの改善は、便利な事前に構成された環境を提供します npm -v
基本的なJSONとターミナルの親しみやすさ：
• 基本的なコマンドライン操作の理解は役立ちます。
インストールとセットアップ：

プロジェクトの初期化：新しいProject Directoryを作成します

1. 依存関係のインストール：

   npmを使用してlaravelミックス、（クロスプラットフォーム環境変数の場合）、および（SASSコンピレーションの場合）：

2. createcross-env：node-sassプロジェクトのルートディレクトリで、次のように

   を作成します。

   npm install laravel-mix cross-env node-sass --save-dev

3. updatewebpack.mix.js：次のスクリプトをwebpack.mix.jsファイルに追加します：

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');

4. アセットファイルの作成：package.jsonで指定されているようにpackage.jsonおよび

   ファイルを作成します。 いくつかのサンプルコンテンツを追加します（例：CSSスタイリング

   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },

   ）。

5. ランラベルミックスを実行：resources/js/app.jsresources/sass/app.scssを実行して、資産をコンパイルします。 出力はwebpack.mix.jsおよびapp.scssディレクトリになります。

6. ホットなリロードとキャッシュバスト（オプション）： npm run dev開発ワークフローを強化するには、ホットリロードとキャッシュのバストを有効にします：public/js public/css

create

：プロジェクトルートでファイルを作成：

npm install laravel-mix cross-env node-sass --save-dev

updatecomposer.json："files": ["mix.php"]のセクションに"autoload"を追加します。 実行composer.json。composer dump-autoload

変更：webpack.mix.jsを追加し、.version()ミックスチェーンに追加：.browserSync() webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

run

：これにより、ホットリロードのある開発サーバーが開始されます。 npm run hot

プロダクションビルド：

展開の場合は、を使用して、最適化された削除資産を生成します

結論：npm run production

Laravel Mixは、非Laravelプロジェクトでの資産編集を管理し、開発プロセスを合理化し、Webpackの構成に関連するオーバーヘッドを削減するためのユーザーフレンドリーなアプローチを提供します。 オプションのホットリロードとキャッシュバスト機能により、開発者エクスペリエンスがさらに向上します。 ファイルにを追加することを忘れないでください。

以上がLaravel Non-LaravelプロジェクトでLaravel Mixを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。