Apa Itu NPM?<\/h2>\n
NPM adalah salah satu registri software terbesar saat ini yang digunakan oleh para developer untuk saling berbagi kode package JavaScript. Secara default, NPM sudah disertakan dengan node.js.<\/p>\n <\/div>\n\n\n\n<\/p>
NPM adalah singkatan dari N<\/strong>ode P<\/strong>ackage M<\/strong>anager, yaitu pengelola package yang memungkinkan developer JavaScript menemukan dan menginstal package kode ke aplikasi jaringan atau server-side.<\/p> Package node.js<\/a> merupakan sebuah direktori yang berisi satu atau lebih modul atau library JavaScript<\/a> yang berfungsi untuk menambahkan berbagai fitur ke suatu aplikasi atau skrip. Tanpa package ini, software developer atau engineer harus menulis kode baru untuk setiap fungsi yang diperlukan.<\/p> Download HTML Cheat Sheet<\/a><\/p> Untuk lebih jelasnya, di artikel ini kami akan menjelaskan selengkapnya tentang apa itu npm, cara kerja npm, serta memandu Anda menggunakannya dan menginstal package tambahan. Mari langsung mulai saja!<\/p> Setelah membahas apa itu NPM, sekarang kami akan membantu Anda memahami cara kerja Node Package Manager.<\/p> Cara kerja npm digolongkan menjadi 3 fungsi, yaitu sebagai:<\/p> Setiap proyek npm berisi package.json<\/strong>, yaitu file yang terletak di direktori root dan berisi metadata proyek atau package NPM, seperti versi dan kontributor package.<\/p> File package.json<\/strong> memudahkan proses identifikasi, pengelolaan, dan penginstalan package. Oleh karena itu, penting untuk menyertakan package.json<\/strong> sebelum memublikasikan proyek di registri npm.<\/p> Berikut adalah contoh isi file package.json<\/strong>:<\/p> Untuk membantu Anda memahami package.json<\/strong>, kami akan membahas baris terpenting dari contoh tersebut:<\/p> Baris di atas mendefinisikan nama package<\/strong>. Nama ini harus kurang dari 214 karakter dan hanya huruf kecil. Kalau Anda ingin memublikasikan tool di registri npm, namanya harus berbeda dari paket lain yang sudah ada.<\/p> Version<\/strong> menentukan versi proyek Anda saat ini, dan harus mengikuti aturan penentuan versi semantik<\/a>.<\/p> Sertakan informasi package di baris description<\/strong> untuk membantu pengguna menemukan proyek Anda di registri npm.<\/p> Kolom main<\/strong> menentukan entry point atau file utama proyek Anda. Kalau properti ini dibiarkan kosong, npm akan secara otomatis menetapkan nilainya ke index.js<\/strong>.<\/p> Properti scripts<\/strong> berisi command yang menjalankan tugas untuk proyek Anda. User npm bisa memanfaatkan kolom ini untuk meneruskan argumen ke CLI tanpa harus mengetik ulang.<\/p> Kolom ini mencantumkan semua dependency<\/strong> (dependensi) atau package yang digunakan dalam proyek. Saat Anda menginstal tool menggunakan command Properti repository<\/strong> berisi URL kode sumber. Dalam contoh ini, GitHub adalah<\/a> lokasi package, dan Git<\/a> adalah sistem kontrol versinya.<\/p> Kolom ini berisi serangkaian keyword<\/strong> yang terkait dengan deskripsi tugas package, membantu user NPM menemukan package melalui pencarian. Hilangkan properti ini kalau Anda tidak akan memublikasikan proyek di registri npm.<\/p> Gunakan properti author<\/strong> (penulis) untuk menyatakan pembuat proyek.<\/p> Baris ini mendefinisikan lisensi<\/strong> proyek npm, memberitahukan apakah proyek bisa digunakan tanpa batasan apa pun.<\/p> Untuk mencari tahu informasi lebih lanjut tentang kolom lain dalam package.json<\/strong>, silakan baca dokumentasi resmi package.json<\/a>.<\/p> Dependency dan devDependency adalah kolom di dalam package.json<\/strong> yang mencantumkan semua package yang digunakan oleh suatu proyek.<\/p> Kolom dependency menyertakan semua package pihak ketiga yang diperlukan agar proyek Anda bisa berjalan.<\/p> Di sisi lain, properti devDependency berisi package yang hanya diperlukan selama proses development.<\/p> Dependency dan devDependency diinstal melalui command Sebelum menggunakan npm, pastikan node.js<\/strong> sudah terinstal. Untuk melakukannya, buka terminal dan jalankan command berikut:<\/p> Jendela terminal akan menampilkan versi node.js<\/strong> yang terinstal di sistem Anda:<\/p> Lakukan lagi untuk npm dengan menggunakan command berikut:<\/p> Setelah itu Anda akan melihat nomor versi seperti berikut:<\/p> Apabila node.js<\/strong> belum terinstal, download dulu dari website resminya<\/a>.<\/p> Selanjutnya kami akan membahas beberapa command NPM dasar.<\/p> \n\n\n Kalau menggunakan VPS Hostinger, Anda bisa memilih template sistem operasi dengan Node.js yang sudah terinstal.<\/p>\n <\/div>\n\n\n\n<\/p> Untuk memulai proyek baru, jalankan command berikut dari CLI npm:<\/p> Command ini akan membuat file package.json<\/strong> untuk proyek Anda di direktori saat ini.<\/p> Setelah menjalankan command Anda akan diminta untuk memasukkan informasi proyek dengan urutan sebagai berikut:<\/p> Berikan respons pada setiap command Kami mengisi informasi package seperti berikut:<\/p> Setelah memasukkan semua detail proyek, Ketik yes<\/strong> lalu tekan Enter<\/strong> untuk menyimpan file package.json<\/strong>. Anda bisa memodifikasinya nanti dengan mengedit file atau menjalankan command Kalau ingin membuat file package.json<\/strong> dengan nilai default tanpa memberikan respons pada prompt Kemudian npm akan membuat file package.json<\/strong> dengan nilai default, seperti ini:<\/p> Setelah membuat file package.json<\/strong>, Anda bisa menambahkan package node apa pun ke proyek Anda.<\/p> Penting untuk mengetahui cara menginstal package ketika akan menggunakan npm.<\/p> Untuk menambahkan package ke proyek Anda, jalankan salah satu command berikut:<\/p> \n\n\n Pada perintah di atas, ganti package-name<\/strong> dengan nama modul yang ingin Anda instal.<\/p>\n <\/div>\n\n\n\n<\/p> Misalnya apabila Anda ingin menginstal express<\/a> (framework web populer yang memudahkan proses web development standar), gunakan command berikut:<\/p> Command ini akan menginstal modul express dalam folder node_modules<\/strong> di direktori root proyek. Perlu diketahui bahwa node_modules<\/strong> hanya akan muncul setelah package pertama diinstal.<\/p> Kalau package berhasil diinstal, terminal akan menampilkan pesan berikut:<\/p> Kemudian, package.json<\/strong> juga akan menyertakan modul di dalam kolom Untuk menginstal tool apa pun yang hanya akan digunakan di development environment<\/a> (lingkungan pengembangan), gunakan perintah berikut:<\/p>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>Cara Kerja npm<\/h2>
\n
Apa Itu package.json?<\/h2>
{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"express\": \"^4.17.1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https:\/\/github.com\/hostinger\/example.git\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\",\n}<\/pre>\"name\": \"hostinger-npm\",<\/pre>
\"version\": \"1.0.0\",<\/pre>
\"description\": \"npm guide for beginner\",<\/pre>
\"main\": \"beginner-npm.js\",<\/pre>
\"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n},<\/pre>\"dependencies\": {\n \"express\": \"^4.16.4\"\n},<\/pre>npm install<\/code>, proyek tersebut akan otomatis dimasukkan di sini.<\/p>\"repository\": {\n \"type\": \"git\",\n \"url\": \"https:\/\/github.com\/hostinger\/example.git\"\n},<\/pre>\"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n],<\/pre>
\"author\": \"Hostinger International\",<\/pre>
\"license\": \"MIT\",<\/pre>
Apa Itu Dependency dan devDependency?<\/h2>
npm install<\/code> dengan flag --save<\/code> dan --save-dev<\/code>.<\/p>Cara Menginstal Modul npm dan Memulai Proyek<\/h2>
node -v<\/pre>
V14.17.5 <\/pre>
npm -v<\/pre>
6.14.14<\/pre>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/mendownload-node-js-dari-website-resmi.png\/public\")
<\/figure><\/div>Tips Berguna<\/h4>\n
Menginisialisasi Proyek dengan npm<\/h3>
npm init<\/pre>
npm init<\/code>, terminal akan menampilkan informasi berikut:<\/p>This utility will walk you through creating a package.json file.\nIt only covers the most common items, and tries to guess sensible defaults.\n\nSee `npm help init` for definitive documentation on these fields\nand exactly what they do.\n\nUse `npm install <pkg>` afterwards to install a package and\nsave it as a dependency in the package.json file.\n\nPress ^C at any time to quit.\npackage name: (test-npm)<\/pre>
\n
npm init<\/code> tersebut dengan mengetikkan nilai Anda lalu menekan Enter<\/strong>. Atau, tekan Enter<\/strong> tanpa memasukkan apa pun untuk menggunakan nilai default atau nilai dalam tanda kurung.<\/p>name: (test-npm)hostinger-npm\nversion: (1.0.0)1.0.0\ndescription: npm guide for beginner\nentry point: (index.js) beginner-npm.js\ntest command:\ngit repository:\nkeywords: npm, example, beginner\nauthor: Hostinger International\nlicense: (ISC) MIT<\/pre>
npm init<\/code> akan menampilkan preview file package.json<\/strong> seperti ini:<\/p>{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"beginner\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\", \n}\nIs this OK? (yes)<\/pre>npm init<\/code> lagi.<\/p>npm init<\/code>, gunakan perintah berikut:<\/p>npm init --yes<\/pre>
{\n \"name\": \"mymac-MacBok-Pro\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\"\n}<\/pre>Menginstall Modul npm pada Proyek<\/h3>
npm install <package-name>\n\/\/ OR\nnpm i <package-name><\/pre>
Tips Berguna<\/h4>\n
npm install express<\/pre>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/modul-express.png\/public\")
<\/figure><\/div>dependencies<\/code>:<\/p>{\n \"name\": \"hostinger-npm\",\n \"version\": \"1.0.0\",\n \"description\": \"npm guide for beginner\",\n \"main\": \"beginner-npm.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [\n \"npm\",\n \"example\",\n \"basic\"\n ],\n \"author\": \"Hostinger International\",\n \"license\": \"MIT\",\n \"dependencies\": {\n \"express\": \"^4.17.1\"\n }\n}<\/pre>Menginstal Package Sebagai Development Dependency<\/h3>
npm install <package-name> --save-dev<\/pre>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/nodemon-sudah-terinstal.png\/public\")
<\/figure><\/div>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/versi-npm-terbaru.png\/public\")
<\/figure><\/div>