Bagaimana untuk menjalankan arahan "npm run build" dalam vue

Vue.js ialah rangka kerja JavaScript popular yang merupakan rangka kerja progresif yang dibangunkan berdasarkan corak MVVM. Apabila membangunkan aplikasi Vue.js, kami selalunya perlu membungkus kod ke dalam versi binaan untuk penggunaan mudah ke pengeluaran. Pada masa ini, kita perlu menjalankan perintah npm run build untuk melaksanakan binaan.

Jadi, mari kita lihat penggunaan khusus perintah npm run build dalam Vue.js.

1. Pengenalan

Dalam Vue.js, kami menggunakan rantai alat bahagian hadapan moden untuk membina projek. Antaranya, dua alatan yang paling penting ialah npm dan Webpack. Antaranya, npm ialah pengurus pakej JavaScript yang boleh digunakan untuk memasang, menaik taraf dan memadam pakej JavaScript. Dan Webpack ialah alat pembungkusan modul, yang boleh membungkus semua modul dalam aplikasi ke dalam satu atau lebih fail untuk kegunaan mudah dalam penyemak imbas. Perintah

npm run build digunakan untuk membungkus aplikasi anda Ia akan membungkus projek Vue.js anda ke dalam satu atau lebih fail, termasuk HTML, CSS, JavaScript dan fail lain. Selepas binaan selesai, anda boleh menggunakan fail ini ke pelayan untuk digunakan.

2. Bagaimana untuk menjalankan perintah npm run build

Projek Vue.js biasanya dibina dengan Vue CLI, jadi kami perlu memasang Vue CLI dahulu:

$ npm install -g @vue/cli

Selepas pemasangan selesai, kita boleh menggunakan Vue CLI untuk mencipta projek Vue.js baharu:

$ vue create my-project

Kemudian, kami memasuki direktori akar projek dan menggunakan arahan berikut untuk menjalankan npm run build:

$ npm run build

Selepas menjalankan arahan ini, Webpack akan secara automatik membungkus kod aplikasi persekitaran yang dijana dan mengeluarkan fail ke direktori /dist.

3. Proses terperinci menjalankan perintah npm run build

Apabila kami memasukkan perintah npm run build, Webpack akan membungkus kod aplikasi kami mengikut konfigurasi fail webpack.config.js dalam projek. Dalam Vue.js, fail webpack.config.js biasanya diletakkan dalam direktori akar projek.

Proses pembungkusan Webpack terutamanya merangkumi langkah-langkah berikut:

1. Memuatkan fail masukan: Webpack membaca fail masukan mengikut set masukan entry dalam fail konfigurasi.
2. Analisis kebergantungan: Webpack menganalisis semua fail yang bergantung pada fail masukan, termasuk CSS, JavaScript, HTML dan fail lain dan membungkusnya ke dalam satu atau lebih fail.
3. Kod pemprosesan: Webpack menukar semua kod JavaScript kepada kod boleh laku penyemak imbas, seperti ES6, TypeScript, CoffeeScript, dsb.
4. Kod termampat: Webpack memampatkan dan mengelirukan kod untuk mengurangkan saiz fail.
5. Fail output: Akhirnya, Webpack mengeluarkan kod yang diproses ke direktori /dist.

Selepas perintah npm run build dilaksanakan, kita boleh membuka direktori /dist untuk melihat fail yang dijana.

4. Ringkasan

Dalam Vue.js, kami menggunakan perintah npm run build untuk menjana kod aplikasi untuk penggunaan ke pengeluaran. Perintah ini menggunakan rantai alat bahagian hadapan moden untuk menjana kod pembungkusan, menjadikan kerja kami lebih cekap dan mudah.

Pada masa yang sama, perlu diperhatikan bahawa semasa proses pembangunan sebenar, kami biasanya perlu membuat beberapa tetapan tersuai untuk perintah npm run build, seperti mengubah suai nama fail pakej, menambah maklumat versi , dsb. Ini memerlukan anda mempunyai pemahaman tertentu tentang fail konfigurasi Webpack untuk membuat tetapan diperibadikan selanjutnya.

Atas ialah kandungan terperinci Bagaimana untuk menjalankan arahan "npm run build" dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!