Rumah  >  Artikel  >  hujung hadapan web  >  Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

青灯夜游
青灯夜游ke hadapan
2022-10-08 17:58:051509semak imbas

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:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Selepas npm memasang pakej ini, ia akan Letakkannya dalam direktori node_modules/.bin:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan 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:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Gunakan nod untuk melaksanakan fail di bawah node_modules/.bin dan masukkan parameter:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Terus nyatakan arahan untuk dijalankan:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Kemudian klik nyahpepijat untuk memulakan:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Anda akan mendapati bahawa modul permulaan di bawah skrip akan dilaksanakan:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Mari kita mulakan dan letakkan titik putus:

Pelaksanaan kod berhenti di sini:

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Konfigurasi ini ialah konfigurasi pek web:

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Turun lebih jauh dan anda akan mendapati pelayan telah dimulakan:

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Kami memasukkan fungsi panggil balik dalam fungsi panggil balik permulaan pelayan Titik putus untuk melihat cara penyemak imbas dibuka:

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Klik langkah ke untuk memasuki titik putus ini:

<.>

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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 :

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Anda boleh melihat penyemak imbas ini dengan melayangkannya:

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Lepaskan titik putus, dan anda akan mendapati bahawa penyemak imbas dibuka:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Dengan cara ini, bukankah kita telah menyelesaikan proses permulaan skrip reaksi?

Ringkasannya ialah:

  • Mengikut arahan mula yang dimasukkan, laksanakan skrip/modul mula
  • Mengikut konfigurasi, cipta objek Pengkompil webpack
  • Buat WebpackDevServer
  • Selepas pelayan dimulakan, mulakan Penyemak imbas membuka url
  • Pelaksanaan membuka url adalah untuk mencuba pelayar tersebut mengikut urutan melalui osaskrip

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:

1Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Tetapi ini juga boleh ditukar:

Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

boleh ditukar kepada IntegratedTerminal, yang akan dikeluarkan dalam terminal:

2Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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:

2Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Tetapi jika anda Ingin tahu apakah konfigurasi lalai? console.log?

Console.log Mencetak objek besar bukanlah idea yang baik Nampaknya seperti ini:

2Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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:

2Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

Kemudian tetapkan titik putus dan jalankan nyahpepijat:

2Sebenarnya terdapat cara yang lebih baik untuk menjalankan skrip npm

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.

Ringkasan

Setiap projek mempunyai skrip npm hanya menggunakannya tanpa menyahpepijatnya, jadi mereka tidak tahu prinsip alatan ini walaupun mereka menggunakannya setiap hari.

Alat baris arahan ini mengisytiharkan medan bin dalam package.json, dan kemudian meletakkannya di bawah node_modules/.bin selepas pemasangan.

Anda boleh menjalankannya dengan node node_modules/.bin/xx, atau anda boleh menjalankannya dengan npx xx Yang paling biasa digunakan ialah skrip npm, yang dijalankan oleh npm run xx.

Penyahpepijatan skrip npm ialah penyahpepijatan nod, tetapi Penyahpepijat VSCode telah dipermudahkan dan boleh terus membuat konfigurasi penyahpepijatan jenis npm.

Selepas mengkonfigurasi konsol sebagai IntegratedTerminal, log akan dikeluarkan ke terminal, yang tidak berbeza dengan menjalankan npm run xx secara langsung. Anda juga boleh titik putus untuk melihat logik pelaksanaan.

Selain menjalankan skrip npm, anda juga boleh menyusun logik pelaksanaannya dan berhenti di tempat yang anda minati. Bukankah ini lebih baik daripada menjalankannya secara terus?

Untuk lebih banyak pengetahuan berkaitan nod, sila lawati:

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!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam