Tutorial ini menunjukkan cara memanfaatkan campuran Laravel, pembalut API Webpack yang diselaraskan, untuk penyusunan aset dalam projek -projek di luar rangka kerja Laravel. Pendekatan ini dengan ketara mempercepatkan persediaan projek dengan menghapuskan keperluan untuk konfigurasi webpack yang luas.

Kelebihan utama:

• Penyusunan aset yang dipermudahkan: campuran Laravel memudahkan kerumitan webpack, membuat pemprosesan aset (JavaScript, CSS, dll.) Lebih mudah.
Persediaan Projek Rapid:
• Luangkan masa yang lebih sedikit mengkonfigurasi alat binaan dan lebih banyak masa membina aplikasi anda. Konfigurasi webpack Webpack tidak diperlukan: campuran Laravel mengendalikan konfigurasi Webpack untuk anda, menghapuskan keperluan untuk fail yang berasingan.
• Prasyarat: webpack.config.js

node.js dan npm: penting untuk menjalankan campuran Laravel. Sahkan pemasangan dengan

.
• php dan komposer (pilihan): node -v diperlukan untuk ciri -ciri versi dan pilihan semula panas. Homestead bertambah baik menyediakan persekitaran pra-konfigurasi yang mudah. ??npm -v
• asas JSON dan terminal kebiasaan: pemahaman operasi baris perintah asas membantu.
• Pemasangan dan persediaan:

Inisialisasi Projek:

1. Pasang kebergantungan:

   Gunakan NPM untuk memasang campuran Laravel,
(untuk pembolehubah persekitaran silang platform), dan
2. (untuk kompilasi SASS):

   cross-env node-sass create

   :

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

   Dalam direktori root projek anda, buat
dengan yang berikut:

3. webpack.mix.js webpack.mix.js kemas kini

   :

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

   Tambahkan skrip berikut ke fail
anda:

4. package.json package.json Buat fail aset:

   Buat fail

   "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"
   },

   dan
seperti yang dinyatakan dalam
5. . Tambah beberapa kandungan sampel (mis., CSS Styling dalam

   ). resources/js/app.js resources/sass/app.scss webpack.mix.js Run Laravel Mix: app.scss Jalankan

   untuk menyusun aset anda. Output akan berada dalam direktori
dan
6. .

   npm run dev public/js Reloading Hot and Cache Busting (Pilihan): public/css

Untuk aliran kerja pembangunan yang dipertingkatkan, aktifkan pemuatan semula panas dan penyusutan cache:

:

di root projek anda:

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

2. UPDATE composer.json: Tambah "files": ["mix.php"] ke bahagian "autoload" composer.json anda. Jalankan composer dump-autoload.

3. mengubah suai webpack.mix.js: tambah .version() dan .browserSync() ke rantaian campuran webpack.mix.js anda:

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

4. Run npm run hot: Ini memulakan pelayan pembangunan dengan memuat semula panas.

Pengeluaran membina:

untuk penempatan, gunakan npm run production untuk menjana aset yang dioptimumkan, minified.

Kesimpulan:

Laravel Mix menawarkan pendekatan mesra pengguna untuk menguruskan kompilasi aset dalam projek bukan laravel, menyelaraskan proses pembangunan dan mengurangkan overhead yang berkaitan dengan mengkonfigurasi Webpack secara langsung. Ciri -ciri pemulihan panas dan cache pilihan ciri -ciri meningkatkan lagi pengalaman pemaju. Ingatlah untuk menambah node_modules ke fail .gitignore anda.

Atas ialah kandungan terperinci Cara Menggunakan Campuran Laravel dalam Projek Bukan Laraver. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!