Rumah > Artikel > hujung hadapan web > Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm
Setiap projek bahagian hadapan mempunyai skrip npm Kami akan menggunakan skrip npm untuk mengatur kompilasi, pembungkusan, lint dan tugasan lain. [Tutorial berkaitan yang disyorkan: tutorial video nodejs]
Anda mungkin sering menjalankan skrip npm, tetapi anda tidak tahu cara alatan baris arahan ini dilaksanakan.
Jadi jika anda ingin memahami prinsip pelaksanaan alatan ini, apakah yang perlu anda lakukan?
Itu topik hari ini: menyahpepijat skrip npm.
Akan ada medan bin dalam package.json alat baris arahan ini untuk mengisytiharkan arahan mana:
Selepas npm memasang pakej ini, ia akan Letakkannya dalam direktori node_modules/.bin:
Supaya kita boleh menjalankan alatan yang berbeza melalui nod ./node_modules/.bin/xx.
Kami juga boleh menggunakan npx untuk menjalankan, seperti npx xx Fungsinya adalah untuk melaksanakan perintah setempat di bawah node_modules/.bin. Jika tidak, ia akan dimuat turun dari npm dan kemudian dilaksanakan.
Sudah tentu, yang paling biasa digunakan ialah meletakkannya dalam skrip npm:
Dengan cara ini, jalankan terus npm run xxx.
skrip npm pada asasnya menggunakan nod untuk menjalankan kod skrip ini, jadi menyahpepijatnya tidak berbeza daripada menyahpepijat kod nod lain.
Iaitu, anda boleh menjalankannya seperti ini:
Dalam fail penyahpepijatan .vscode/launch.json, pilih program pelancaran nod:
Gunakan nod untuk melaksanakan fail di bawah node_modules/.bin dan masukkan parameter:
Malah, terdapat cara yang lebih mudah, VSCode Debugger lakukan ini untuk senario penyahpepijatan skrip npm Tanpa enkapsulasi, anda boleh terus memilih konfigurasi penyahpepijatan jenis npm:
Terus nyatakan arahan untuk dijalankan:
Sebagai contoh, kami akan menggunakan projek react yang dibuat oleh create-react-app untuk cuba menyahpepijat skrip npm:
Pergi dahulu ke node_modules/.bin dan letakkan titik putus dalam fail ini:
Kemudian klik nyahpepijat untuk memulakan:
Anda akan mendapati bahawa modul permulaan di bawah skrip akan dilaksanakan:
Mari kita mulakan dan letakkan titik putus:
Pelaksanaan kod berhenti di sini:
Konfigurasi ini ialah konfigurasi pek web:
Turun lebih jauh dan anda akan mendapati pelayan telah dimulakan:
Kami memasukkan fungsi panggil balik dalam fungsi panggil balik permulaan pelayan Titik putus untuk melihat cara penyemak imbas dibuka:
Klik langkah ke untuk memasuki titik putus ini:
<.>Kemudian pelaksanaan satu langkah akan membawa kepada kod seperti ini: Mulakan pelayar ini melalui osaskrip secara bergilir-gilir Jika permulaan gagal, ia akan diabaikan dalam tangkapan cuba : Anda boleh melihat penyemak imbas ini dengan melayangkannya: Lepaskan titik putus, dan anda akan mendapati bahawa penyemak imbas dibuka: Dengan cara ini, bukankah kita telah menyelesaikan proses permulaan skrip reaksi? Ringkasannya ialah:Selepas menyahpepijatnya seperti ini, kami akan mempunyai pemahaman yang lebih mendalam tentang permulaan run npm.
Selain itu, tiada perbezaan antara menjalankan skrip dalam mod debugging dan npm run bermula terus dari baris arahan.
Untuk bercakap tentang perbezaan, satu-satunya perbezaan mungkin ini:
Dalam mod nyahpepijat lalai, kandungan output akan dipaparkan dalam panel Debug Console:
Tetapi ini juga boleh ditukar:
boleh ditukar kepada IntegratedTerminal, yang akan dikeluarkan dalam terminal:
Dengan cara ini, tiada perbezaan daripada pelaksanaan permulaan larian npm biasa, dan anda juga boleh titik putus untuk nyahpepijat.
Mari kita lihat contoh sekali lagi, seperti projek vue yang dibuat oleh vue cli Anda boleh menukar konfigurasi webpack dalam vue.config.js:
Tetapi jika anda Ingin tahu apakah konfigurasi lalai? console.log? Console.log Mencetak objek besar bukanlah idea yang baik Nampaknya seperti ini: Sesetengah pelajar berkata untuk menggunakan JSON.stringify, yang lebih banyak. hodoh. Bagaimana jika anda tahu cara menyahpepijat skrip npm? Anda boleh menambah konfigurasi penyahpepijatan jenis npm: Kemudian tetapkan titik putus dan jalankan nyahpepijat:Anda boleh melihat sebarang konfigurasi, bukankah itu hebat? Contoh yang saya berikan hanya untuk webpack, tetapi skrip npm lain, seperti babel, tsc, eslint, vite, dll., semuanya dinyahpepijat dengan cara yang sama.
tutorial nodejs!
Atas ialah kandungan terperinci Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!