Apa yang ada perintah npm?

Sebagai pengurus pakej, NPM juga boleh melaksanakan tugas -tugas yang serupa dengan alat arahan baris arahan yang terdahulu seperti Grunt and Gulp. Selepas memasang pakej SASS dalam bab sebelumnya, kita boleh mula menggunakannya!

Bab Panduan

1. Siapa panduan ini?
2. Apa sebenarnya maksud "npm"?
3. Apakah baris arahan?
4. Apa itu nod?
5. Apa itu Pengurus Pakej?
6. Bagaimana cara memasang npm?
7. Bagaimana cara memasang pakej npm?
8. Apakah arahan NPM? (Lokasi semasa anda!)
9. Bagaimana cara memasang projek NPM yang sedia ada?

Perintah NPM yang mendalam

Buka fail package.json dalam folder ujian, anda tidak akan melihat banyak kandungan pada masa ini dependencies

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

Walau bagaimanapun, fail package.json mengandungi lebih banyak daripada kebergantungan. Ia juga mengandungi banyak maklumat meta mengenai projek itu. Bahagian yang paling menarik adalah harta pilihan tetapi sangat berguna yang dipanggil scripts .

Ingatlah bahawa semua sub-ketergantungan SASS direkodkan dalam package-lock.json yang dihasilkan secara automatik dan tidak boleh diedit secara manual. package.json biasanya hanya mengandungi kebergantungan peringkat atas, dan kami boleh menyesuaikannya secara bebas.

Objek scripts dalam fail package.json membolehkan anda membuat arahan yang boleh dijalankan dalam projek untuk membantu anda mengendalikan pelbagai tugas, sama ada ia adalah satu larian atau proses berjalan yang berterusan. Biasanya, "tugas -tugas" ini digunakan untuk memulakan pelayan pembangunan yang dibangunkan secara tempatan, menyusun sumber, dan/atau ujian. Malah, perintah start atau dev sering dibina dalam projek untuk mengendalikan semua tugas yang mungkin anda perlukan untuk berjalan secara serentak, seperti menyusun sass dan javascript.

Kami tidak mempunyai skrip untuk dijalankan, tetapi mari membetulkannya!

Contoh: Menyusun sass ke CSS

Dalam bahagian scripts fail package.json , kami boleh mengakses semua pakej yang dipasang. Walaupun kita tidak dapat menaip perintah SASS terus ke terminal sekarang, kita boleh menjalankan perintah SASS sebagai sebahagian daripada skrip NPM.

Jika SASS dipasang secara global (yang bermaksud pemasangan seluruh sistem, bukan dalam folder projek tertentu), kita boleh menjalankan perintah SASS di terminal. Setakat ini, kami hanya memasang SASS ke folder ini (ini adalah tingkah laku lalai apabila memasang pakej). Walau bagaimanapun, pemasangan global akan menjadikan arahan SASS tersedia di mana -mana sahaja di sistem.

Pertama, tampal blok kod ini ke dalam fail package.json anda sebaik sahaja selepas permulaan { curly braces:

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

Sintaks JSON sangat ketat. Jika anda mempunyai masalah, cuba jalankan kandungan fail menggunakan Validator JSON.

Ini memberi kita akses kepada <code>npm run sass:build</code> Script, yang akan menyusun SASS kepada CSS untuk kita!

Nama arahan tidak penting, selagi ia adalah rentetan berterusan. Ia build perlu diperhatikan bahawa kolon (:) tidak mempunyai sass khas di sini;

Jika anda telah menggunakan arahan SASS sebelum (atau anda melihat terlebih dahulu), anda mungkin tahu bahawa ini bermakna kita juga perlu membuat fail style.scss dalam akar folder projek. Mari kita lakukan ini dan letakkan beberapa kod sass sewenang -wenang ke dalamnya.

Jika anda ingin menyalin dan tampal, inilah kod SASS yang saya gunakan:

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

Luar Biasa! Simpan fail sebagai style.scss dalam direktori root projek, dan kemudian mari cuba menjalankan arahan baru:

 <code>npm run sass:build</code>

Setelah tugas ini selesai, anda harus segera melihat dua fail baru yang terdapat dalam folder projek: style.css dan style.css.map .

Jika anda lebih suka, anda boleh membuka fail style.css (yang mengandungi kod CSS yang disusun) untuk mengesahkan bahawa ia adalah apa yang kami harapkan:

Pakej SASS juga menyusun peta sumber untuk kita, yang membolehkan kita melihat gaya mana yang datang dari mana fail .scss semasa memeriksa gaya dalam penyemak imbas. Hebat!

Jika anda menghadapi ralat: Semak semula sintaks dalam package.json untuk memastikan ia adalah JSON yang sah (anda boleh menggunakan Validator JSON dalam talian di sini), dan fail .scss anda mengandungi SASS yang sah (yang merupakan penukar SASS dalam talian). Satu lagi perkara yang perlu diperiksa ialah sama ada nama fail sepadan dengan nama fail dalam arahan.

Buat arahan pembangunan sahaja

Ini bagus, tetapi apabila kita melakukan perkembangan, kita mungkin bosan menjalankan perintah berulang kali. Oleh itu, mari kita sediakan arahan kedua, memberitahu SASS untuk memantau fail untuk kami dan mengkompilasi semula secara automatik apabila kami menyimpan perubahan!

Tambahkan perkara berikut ke dalam objek scripts dalam package.json :

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

Nota Penting: Pastikan terdapat koma (,) antara kedua -dua skrip. Perintah itu tidak penting, tetapi koma di antara mereka adalah penting. Sekali lagi, JSON sangat ketat, jadi bergantung kepada Validator JSON jika perlu.

Sekarang, jika kita menjalankan sass:watch (tidak boleh dikelirukan dengan Sasquatch), anda akan melihat mesej di terminal yang mengatakan "SASS sedang memantau perubahan. Tekan Ctrl-C untuk berhenti".

Jika anda kini membuka fail style.scss , buat perubahan dan simpan, anda harus melihat mesej yang muncul secara automatik di terminal yang mengesahkan bahawa SASS telah dikompilasi kepada CSS:

Sekarang ini berguna! Bukan itu sahaja, sebaik sahaja kami menyerahkan fail -fail ini ke repositori kami, kami akan mempunyai arahan yang tepat untuk memasang dan menjalankan SASS, dan menggunakan arahan yang mudah - seperti yang terlibat dalam projek ini!

Kami akan menamatkan projek ujian ini. Adalah berguna untuk melihat bagaimana untuk memulakan, tetapi kebanyakan masa, anda akan menggunakan projek yang telah dikonfigurasikan dan bukannya membuat perintah NPM dari awal, yang mana yang akan kita lakukan dalam bab terakhir panduan NPM ini.

Arahan akhir untuk memasang pakej npm

Anda harus tahu bahawa sebenarnya terdapat dua cara untuk memasang pakej NPM, yang mana yang anda inginkan bergantung kepada sama ada pakej itu harus menjadi sebahagian daripada binaan pengeluaran, atau sama ada untuk tujuan pembangunan semata -mata.

• npm install (atau npm i ) adalah kaedah standard (dan lalai) untuk menambah pakej ke projek.
• npm install --save-dev (atau npm i -D ) hanya menambah pakej ke "kebergantungan pembangunan" anda, yang bermaksud mereka hanya dipasang apabila projek itu dibangunkan dan tidak apabila versi pengeluaran akhir projek dibina.

Pakej yang dipasang sebagai kebergantungan pembangunan mungkin termasuk perpustakaan ujian, alat pemeriksaan kod, pelayan pratonton, dan alat lain yang hanya membantu anda semasa pembangunan. Mereka biasanya tidak digunakan untuk menyusun atau menjalankan laman web itu sendiri.

Terdapat juga bendera akhir yang bernilai mengetahui: npm install --global (atau npm i -g ). Ini adalah cara memasang pakej secara global, seperti yang dibincangkan ketika memasang SASS lebih awal. Sebagai contoh, jika anda mahu dapat menjalankan sass di mana -mana di mesin, anda boleh menggunakan kaedah ini. Kes penggunaan biasa lain untuk pemasangan global mungkin termasuk alat CLI yang anda ingin gunakan di mana -mana, atau juga pengurus pakej lain, seperti benang.

Langkah seterusnya

Kami akan menyelesaikan perjalanan kami! Satu lagi perkara yang perlu anda ketahui, dan semua yang anda perlukan untuk memulakan projek sedia ada dengan cepat menggunakan NPM. Jadi, katakan anda mewarisi projek menggunakan NPM. Di mana anda bermula? Bagaimana anda memastikan anda terus bekerja dengan orang lain? Ini adalah tumpuan bahagian terakhir panduan NPM ini.

← Bab 7 Bab 9 →

Atas ialah kandungan terperinci Apa yang ada perintah npm?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!