Pembangunan PHP: bangunan dan pembungkusan bahagian hadapan dengan Laravel Mix

PHP ialah bahasa pembangunan web bahagian belakang yang popular, dan dalam pembangunan web moden, pembinaan dan pembungkusan bahagian hadapan menjadi semakin penting. Untuk meningkatkan kecekapan dalam pembangunan PHP, kami boleh memilih untuk menggunakan Laravel Mix, alat binaan bahagian hadapan yang berkuasa, untuk memudahkan proses pembinaan dan pembungkusan bahagian hadapan serta menyepadukan pembangunan bahagian hadapan dan bahagian belakang dengan lebih rapat. Artikel ini akan memperkenalkan penggunaan asas Laravel Mix dan beberapa operasi biasa.

Apakah itu Laravel Mix?

Laravel Mix ialah alat binaan bahagian hadapan yang disediakan secara rasmi oleh Laravel. Ia berdasarkan Webpack dan menyediakan pembangun API yang ringkas dan elegan untuk membantu membina aplikasi bahagian hadapan yang berkualiti tinggi dengan cepat. Laravel Mix menyepadukan penyegaran automatik, pemisahan kod, kawalan versi dan lebih banyak ciri, dan boleh disesuaikan mengikut keperluan projek.

Pemasangan dan Konfigurasi

Pertama, kita perlu memasang Laravel Mix with Composer Anda boleh memasukkan arahan berikut dalam terminal:

composer require laravel/mix

Selepas itu, kita perlu mencipta. fail webpack.mix.js, ini ialah fail konfigurasi Laravel Mix. Kita boleh menentukan laluan fail yang hendak dikompilasi, direktori output, konfigurasi dalam pembangunan dan persekitaran pengeluaran, dsb. dalam fail ini.

Berikut ialah contoh fail webpack.mix.js mudah:

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

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

Dalam kod di atas, kami menggunakan kaedah js() dan kaedah sass() untuk menentukan fail JavaScript yang perlu disusun dan fail Sass, direktori output ditentukan sebagai public/js dan public/css. Masukkan arahan berikut dalam terminal untuk menyusun:

npm run dev

Perintah ini akan menyusun fail sumber ke direktori yang ditentukan Fail sumber boleh dibuka dalam penyemak imbas untuk pratonton masa nyata.

Selain itu, anda juga boleh melakukan beberapa operasi biasa lain, seperti:

1. Proses berbilang fail JavaScript dan gabungkannya menjadi satu.
2. Muat pustaka CSS atau JavaScript luaran daripada CDN pihak ketiga atau setempat.
3. Salin fail imej ke direktori output yang ditentukan.
4. Kawalan versi melalui kaedah version().

API Campuran Laravel

API Campuran Laravel ialah bahagian teras Campuran Laravel Melalui API ini, kami boleh melakukan operasi pembinaan dan pembungkusan bahagian hadapan dengan mudah.

Berikut ialah beberapa kaedah dan operasi biasa dalam API Campuran Laravel:

js()

Gunakan kaedah ini untuk memproses fail JavaScript, contohnya:

rreee

Kaedah ini menyusun resources/js/app.js fail ke dalam direktori public/js.

sass() dan less()

gunakan kaedah sass() atau kaedah less() untuk memproses fail Sass atau Less files, contohnya:

rreee

Ini kaedah akan resources/sass/app.scss fail disusun ke dalam direktori public/css.

css()

Semasa proses pembangunan, kami mungkin menggunakan fail CSS beberapa pustaka pihak ketiga, seperti Bootstrap atau Font Awesome Pada masa ini kami boleh menggunakan css() kaedah, daripada CDN atau muatkan fail ini secara setempat:

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

version()

Gunakan kaedah version() untuk menetapkan nombor versi bagi fail sumber untuk mengelakkan cache penyemak imbas, contohnya:

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

Nombor versi fail sumber akan ditambahkan pada URL, yang membantu penyemak imbas memuat turun semula fail selepas mengemas kininya.

copy()

Gunakan kaedah copy() untuk menyalin fail ke direktori output yang ditentukan, contohnya:

mix.css('https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css');

Kaedah ini akan menyalin fail dalam resources/images direktori Pergi ke direktori public/images.

webpackConfig()

Gunakan kaedah webpackConfig() untuk menyesuaikan konfigurasi Webpack, contohnya:

mix.js('resources/js/app.js', 'public/js')
   .version();

Kod di atas menyesuaikan konfigurasi Webpack dan menggunakan Babel untuk Terjemahan JSX.

Ringkasan

Dengan menggunakan Laravel Mix, kami boleh memudahkan pembinaan bahagian hadapan dan operasi pembungkusan, menyepadukan pembangunan bahagian hadapan dan belakang dengan lebih rapat, serta meningkatkan kecekapan kerja pasukan dan pengalaman pembangunan. Dalam projek sebenar, lebih banyak konfigurasi tersuai perlu dilakukan seperti yang diperlukan, seperti menetapkan prapemproses CSS, pemampatan kod, dll. Operasi ini boleh diselesaikan melalui API Campuran Laravel.

Atas ialah kandungan terperinci Pembangunan PHP: bangunan dan pembungkusan bahagian hadapan dengan Laravel Mix. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!