Cara menggunakan Laravel Mix untuk binaan hadapan dalam ThinkPHP6

Dengan perkembangan pesat teknologi bahagian hadapan, semakin ramai pembangun web mula meneroka cara menggunakan alatan bahagian hadapan moden untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Laravel Mix, sebagai alat pembinaan bahagian hadapan dalam rangka kerja Laravel, telah diiktiraf secara meluas dan digunakan selama bertahun-tahun pembangunan.

Pada masa yang sama, ThinkPHP6, sebagai rangka kerja PHP yang popular, juga telah mula memperkenalkan Laravel Mix sebagai alat binaan bahagian hadapan lalainya. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Laravel Mix untuk bangunan bahagian hadapan dalam ThinkPHP6, serta beberapa petua dan pertimbangan biasa.

1. Pasang Laravel Mix

Sebelum kita mula menggunakan Laravel Mix, kita perlu memastikan bahawa Node.js dan npm dipasang. Selepas pemasangan selesai, anda boleh menggunakan arahan berikut untuk memasang Laravel Mix:

npm install laravel-mix --save-dev

Selepas pemasangan selesai, kita boleh menggunakan arahan berikut untuk mengesahkan sama ada pemasangan berjaya:

npx mix --version

2. Konfigurasikan webpack.mix .js

Fail konfigurasi lalai untuk Laravel Mix ialah webpack.mix.js. Kita perlu mengkonfigurasi beberapa parameter dalam fail ini supaya Laravel Mix boleh berfungsi dengan betul. Berikut ialah kandungan contoh fail webpack.mix.js:

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

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

Dalam fail konfigurasi ini, kami mentakrifkan laluan input dan output untuk fail JavaScript dan fail SCSS. Apabila menjalankan arahan binaan bahagian hadapan, Laravel Mix akan membaca tetapan ini secara automatik dan menyusun fail input ke dalam fail output.

Selain laluan input dan output, kami juga boleh menetapkan pilihan berikut dalam fail webpack.mix.js:

• sourceMaps: sama ada hendak menjana fail peta sumber (lalai adalah benar) ;
• extractVueStyles: sama ada untuk mengekstrak gaya dalam komponen Vue ke dalam fail CSS yang berasingan (lalai adalah palsu); dengan nombor versi ( Lalai adalah palsu);
• Dengan mentakrifkan pelbagai tetapan dan pilihan dalam fail webpack.mix.js, kami boleh menyesuaikan cara Laravel Mix berfungsi berdasarkan keperluan projek khusus kami.

Jalankan arahan bina bahagian hadapan

Selepas mengkonfigurasi fail webpack.mix.js dengan betul, kita boleh menggunakan arahan berikut untuk menjalankan proses binaan bahagian hadapan daripada Laravel Mix:

3. npx mix

Arahan ini akan membaca tetapan dalam fail webpack.mix.js, menyusun fail input dan menyimpan fail output ke laluan output yang ditentukan. Semasa masa jalanan, Laravel Mix secara automatik mengesan perubahan pada fail input dan menyusun semula fail output jika perlu.

Selain itu, kami juga boleh menambahkan beberapa parameter untuk menyesuaikan pilihan binaan semasa menjalankan arahan binaan. Berikut ialah beberapa pilihan baris arahan yang tersedia:

--pengeluaran: Dayakan mod pengeluaran, pemampatan dan peminimakan didayakan secara automatik. Biasa digunakan dalam binaan persekitaran pengeluaran.

--lihat: Hidupkan mod pemantauan, yang akan mengesan perubahan dalam fail input dan menyusun semula fail output secara automatik. Biasa digunakan untuk penyahpepijatan dalam persekitaran pembangunan.

• --panas: Dayakan penggantian modul panas, hasil pengubahsuaian akan dipaparkan dalam penyemak imbas dalam masa nyata tanpa memuat semula halaman secara manual. Biasa digunakan untuk penyahpepijatan dalam persekitaran pembangunan.
• Gunakan ciri yang disediakan oleh Laravel Mix

Selain kompilasi input dan output asas, Laravel Mix juga menyediakan banyak ciri dan pemalam berguna yang boleh Digunakan untuk meningkatkan kecekapan pembangunan bahagian hadapan kami.
4. Berikut ialah beberapa pemalam dan fungsi Laravel Mix yang biasa digunakan:

Browsersync: membenarkan penyemak imbas memaparkan hasil pengubahsuaian dalam masa nyata dan menyokong paparan serentak pada berbilang peranti .

Sokongan Vue.js: Menyediakan pelbagai fungsi kompilasi untuk digunakan dengan Vue.js.

• PostCSS: Menyediakan pelbagai fungsi pemprosesan pasca CSS, seperti menambah awalan penyemak imbas secara automatik, mengekstrak pembolehubah CSS, dsb.
• Autopfixer: Tambah awalan penyemak imbas secara automatik pada CSS.
• PurgeCSS: Alih keluar gaya yang tidak digunakan secara automatik daripada CSS.
• Ringkasan
• Laravel Mix ialah alat binaan bahagian hadapan yang berkuasa dan mudah digunakan yang memberikan banyak kemudahan untuk pembangunan aplikasi web kami. Dengan mengkonfigurasi fail webpack.mix.js dengan betul dan menggunakan fungsi yang disediakan oleh Laravel Mix, kami boleh membina sistem front-end yang cekap dan boleh dipercayai, serta meningkatkan kecekapan pembangunan dan pengalaman pengguna kami.

Atas ialah kandungan terperinci Cara menggunakan Laravel Mix untuk binaan hadapan dalam ThinkPHP6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!