{"id":9062,"date":"2020-01-23T02:29:05","date_gmt":"2020-01-23T02:29:05","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=9062"},"modified":"2023-04-19T17:55:45","modified_gmt":"2023-04-19T10:55:45","slug":"apa-itu-npm","status":"publish","type":"post","link":"\/id\/tutorial\/apa-itu-npm\/","title":{"rendered":"Apa itu NPM (Node Package Manager): panduan untuk pemula"},"content":{"rendered":"<p><div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Apa Itu NPM?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">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><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">NPM adalah singkatan dari <strong>N<\/strong>ode <strong>P<\/strong>ackage <strong>M<\/strong>anager, yaitu pengelola package yang memungkinkan developer&nbsp;JavaScript&nbsp;menemukan dan menginstal package kode ke aplikasi jaringan atau server-side.<\/p><p class=\"wp-block-paragraph\">Package <a href=\"\/id\/tutorial\/node-js-adalah\/\">node.js<\/a> merupakan sebuah direktori yang berisi satu atau lebih modul atau library <a href=\"\/id\/tutorial\/apa-itu-javascript\/\">JavaScript<\/a> yang berfungsi untuk menambahkan berbagai fitur ke suatu aplikasi atau skrip.&nbsp;Tanpa package ini, software developer atau engineer harus menulis kode baru untuk setiap fungsi yang diperlukan.<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/HTML-Cheat-Sheet.pdf\" target=\"_blank\" rel=\"noopener\">Download HTML Cheat Sheet<\/a><\/p><p class=\"wp-block-paragraph\">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><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-cara-kerja-npm\">Cara Kerja npm<\/h2><p class=\"wp-block-paragraph\">Setelah membahas apa itu NPM, sekarang kami akan membantu Anda memahami cara kerja Node Package Manager.<\/p><p class=\"wp-block-paragraph\">Cara kerja npm digolongkan menjadi 3 fungsi, yaitu sebagai:<\/p><ul class=\"wp-block-list\">\n<li><strong>Repositori<\/strong> &ndash; npm adalah&nbsp;<a href=\"https:\/\/npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">repositori<\/a>&nbsp;yang banyak digunakan&nbsp;untuk memublikasikan proyek Node open-source, tempat para developer bisa berbagi source code dengan user npm lainnya. <strong>Angular<\/strong>,&nbsp;<strong>React<\/strong>, dan&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/jquery\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery<\/a>&nbsp;merupakan beberapa package yang bisa Anda download dari repositori npm.<\/li>\n\n\n\n<li><strong>Command-line interface (CLI)<\/strong> &ndash; developer bisa menjalankan <a href=\"\/id\/tutorial\/apa-itu-cli\/\">CLI<\/a>&nbsp;npm&nbsp;dari terminal atau tool command-line untuk menginstal atau menghapus package serta mengelola versi atau dependensi.<\/li>\n\n\n\n<li><strong>Registri<\/strong>&nbsp;&ndash; setiap package atau modul yang Anda instal menggunakan CLI npm didownload dari <a href=\"https:\/\/registry.npmjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">registri publik npm<\/a>, database software JavaScript.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-apa-itu-package-json\">Apa Itu package.json?<\/h2><p class=\"wp-block-paragraph\">Setiap proyek npm berisi <strong>package.json<\/strong>, yaitu file yang terletak di direktori root dan&nbsp;berisi metadata proyek atau package NPM, seperti versi dan kontributor package.<\/p><p class=\"wp-block-paragraph\">File <strong>package.json<\/strong> memudahkan proses identifikasi, pengelolaan, dan penginstalan package.&nbsp;Oleh karena itu, penting untuk menyertakan <strong>package.json<\/strong> sebelum memublikasikan proyek di registri npm.<\/p><p class=\"wp-block-paragraph\">Berikut adalah contoh isi file <strong>package.json<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\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\\\" &amp;&amp; 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><p class=\"wp-block-paragraph\">Untuk membantu Anda memahami&nbsp;<strong>package.json<\/strong>, kami akan membahas baris terpenting dari contoh tersebut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"name\": \"hostinger-npm\",<\/pre><p class=\"wp-block-paragraph\">Baris di atas mendefinisikan <strong>nama package<\/strong>.&nbsp;Nama ini harus kurang dari 214 karakter dan hanya huruf kecil.&nbsp;Kalau Anda ingin memublikasikan tool di registri npm, namanya harus berbeda dari paket lain yang sudah ada.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"version\": \"1.0.0\",<\/pre><p class=\"wp-block-paragraph\"><strong>Version<\/strong>&nbsp;menentukan versi proyek Anda saat ini, dan harus mengikuti <a href=\"https:\/\/docs.npmjs.com\/about-semantic-versioning\" target=\"_blank\" rel=\"noopener\">aturan penentuan&nbsp;versi&nbsp;semantik<\/a>.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"description\": \"npm guide for beginner\",<\/pre><p class=\"wp-block-paragraph\">Sertakan informasi package di baris <strong>description<\/strong> untuk membantu pengguna menemukan proyek Anda di registri npm.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"main\": \"beginner-npm.js\",<\/pre><p class=\"wp-block-paragraph\">Kolom <strong>main<\/strong> menentukan entry point atau file utama proyek Anda.&nbsp;Kalau properti ini dibiarkan kosong, npm akan secara otomatis menetapkan nilainya ke <strong>index.js<\/strong>.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\"\n},<\/pre><p class=\"wp-block-paragraph\">Properti <strong>scripts<\/strong> berisi command yang menjalankan tugas untuk proyek Anda.&nbsp;User npm bisa memanfaatkan kolom ini untuk meneruskan argumen ke CLI tanpa harus mengetik ulang.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"dependencies\": {\n  \"express\": \"^4.16.4\"\n},<\/pre><p class=\"wp-block-paragraph\">Kolom ini mencantumkan semua <strong>dependency<\/strong> (dependensi)&nbsp;atau package yang digunakan dalam proyek.&nbsp;Saat Anda menginstal tool menggunakan command <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm install<\/code>, proyek tersebut akan otomatis dimasukkan di sini.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"repository\": {\n  \"type\": \"git\",\n  \"url\": \"https:\/\/github.com\/hostinger\/example.git\"\n},<\/pre><p class=\"wp-block-paragraph\">Properti <strong>repository<\/strong>&nbsp;berisi&nbsp;URL kode sumber. Dalam contoh ini, <a href=\"\/id\/tutorial\/apa-itu-github\/\">GitHub&nbsp;adalah<\/a> lokasi package, dan <a href=\"\/id\/tutorial\/cara-menggunakan-git\/\">Git<\/a> adalah sistem kontrol versinya.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"keywords\": [\n  \"npm\",\n  \"example\",\n  \"basic\"\n],<\/pre><p class=\"wp-block-paragraph\">Kolom ini berisi serangkaian <strong>keyword<\/strong> yang terkait dengan deskripsi tugas package, membantu user NPM menemukan package melalui pencarian.&nbsp;Hilangkan properti ini kalau Anda tidak akan memublikasikan proyek di registri npm.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"author\": \"Hostinger International\",<\/pre><p class=\"wp-block-paragraph\">Gunakan properti&nbsp;<strong>author<\/strong> (penulis)&nbsp;untuk menyatakan pembuat proyek.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"license\": \"MIT\",<\/pre><p class=\"wp-block-paragraph\">Baris ini mendefinisikan <strong>lisensi<\/strong> proyek npm, memberitahukan apakah proyek bisa digunakan tanpa batasan apa pun.<\/p><p class=\"wp-block-paragraph\">Untuk mencari tahu informasi lebih lanjut tentang kolom lain dalam <strong>package.json<\/strong>, silakan baca <a href=\"https:\/\/docs.npmjs.com\/files\/package.json\" target=\"_blank\" rel=\"noreferrer noopener\">dokumentasi resmi package.json<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-apa-itu-dependency-dan-devdependency\">Apa Itu Dependency&nbsp;dan devDependency?<\/h2><p class=\"wp-block-paragraph\">Dependency&nbsp;dan devDependency adalah kolom di dalam <strong>package.json<\/strong> yang mencantumkan semua package yang digunakan oleh suatu proyek.<\/p><p class=\"wp-block-paragraph\">Kolom dependency menyertakan semua package pihak ketiga yang diperlukan agar proyek Anda bisa berjalan.<\/p><p class=\"wp-block-paragraph\">Di sisi lain, properti devDependency berisi package yang hanya diperlukan selama proses development.<\/p><p class=\"wp-block-paragraph\">Dependency dan devDependency diinstal melalui command <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm install<\/code> dengan flag <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">--save<\/code>&nbsp;dan <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">--save-dev<\/code>.<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-menginstal-modul-npm-dan-memulai-proyek\">Cara Menginstal Modul npm dan Memulai Proyek<\/h2><p class=\"wp-block-paragraph\">Sebelum menggunakan npm, pastikan&nbsp;<strong>node.js<\/strong>&nbsp;sudah terinstal.&nbsp;Untuk melakukannya, buka terminal dan jalankan command berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">node -v<\/pre><p class=\"wp-block-paragraph\">Jendela terminal akan menampilkan versi <strong>node.js<\/strong> yang terinstal di sistem Anda:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">V14.17.5  <\/pre><p class=\"wp-block-paragraph\">Lakukan lagi untuk npm dengan menggunakan command berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm -v<\/pre><p class=\"wp-block-paragraph\">Setelah itu Anda akan melihat nomor versi seperti berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">6.14.14<\/pre><p class=\"wp-block-paragraph\">Apabila <strong>node.js<\/strong> belum terinstal, download dulu dari&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">website resminya<\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/mendownload-node-js-dari-website-resmi.png\/public\" alt=\"\" class=\"wp-image-27966\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/mendownload-node-js-dari-website-resmi.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/mendownload-node-js-dari-website-resmi.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/mendownload-node-js-dari-website-resmi.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/mendownload-node-js-dari-website-resmi.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Selanjutnya kami akan membahas beberapa command NPM dasar.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Tips Berguna                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Kalau menggunakan VPS Hostinger, Anda bisa memilih template sistem operasi dengan Node.js yang sudah terinstal.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-menginisialisasi-proyek-dengan-npm\">Menginisialisasi Proyek dengan npm<\/h3><p class=\"wp-block-paragraph\">Untuk memulai proyek baru, jalankan command berikut dari CLI npm:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm init<\/pre><p class=\"wp-block-paragraph\">Command ini akan membuat file <strong>package.json<\/strong>&nbsp;untuk proyek&nbsp;Anda di direktori saat ini.<\/p><p class=\"wp-block-paragraph\">Setelah menjalankan command <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm init<\/code>, terminal akan menampilkan informasi berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">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 &lt;pkg&gt;` 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><p class=\"wp-block-paragraph\">Anda akan diminta untuk memasukkan informasi proyek dengan urutan sebagai berikut:<\/p><ul class=\"wp-block-list\">\n<li>Nama package<\/li>\n\n\n\n<li>Versi awal<\/li>\n\n\n\n<li>Deskripsi<\/li>\n\n\n\n<li>Entry point<\/li>\n\n\n\n<li>Command pengujian<\/li>\n\n\n\n<li>Repositori Git<\/li>\n\n\n\n<li>Keyword<\/li>\n\n\n\n<li>Author<\/li>\n\n\n\n<li>Lisensi<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Berikan respons pada setiap command <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm init<\/code> tersebut dengan mengetikkan nilai Anda lalu menekan <strong>Enter<\/strong>. Atau, tekan <strong>Enter<\/strong> tanpa memasukkan apa pun untuk menggunakan nilai default atau nilai dalam tanda kurung.<\/p><p class=\"wp-block-paragraph\">Kami mengisi informasi package seperti berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">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><p class=\"wp-block-paragraph\">Setelah memasukkan semua detail proyek, <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm init<\/code> akan menampilkan preview file <strong>package.json<\/strong> seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\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\\\" &amp;&amp; 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><p class=\"wp-block-paragraph\">Ketik <strong>yes<\/strong> lalu tekan <strong>Enter<\/strong>&nbsp;untuk menyimpan file <strong>package.json<\/strong>.&nbsp;Anda bisa memodifikasinya nanti dengan mengedit file atau menjalankan command <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm init<\/code> lagi.<\/p><p class=\"wp-block-paragraph\">Kalau ingin membuat file <strong>package.json<\/strong> dengan nilai default tanpa memberikan respons pada prompt <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">npm init<\/code>, gunakan perintah berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm init --yes<\/pre><p class=\"wp-block-paragraph\">Kemudian npm akan membuat file <strong>package.json<\/strong> dengan nilai default, seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\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\\\" &amp;&amp; exit 1\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}<\/pre><p class=\"wp-block-paragraph\">Setelah membuat file <strong>package.json<\/strong>, Anda bisa menambahkan package node apa pun ke proyek Anda.<\/p><h3 class=\"wp-block-heading\" id=\"h-menginstall-modul-npm-pada-proyek\">Menginstall Modul npm pada Proyek<\/h3><p class=\"wp-block-paragraph\">Penting untuk mengetahui cara menginstal package ketika akan menggunakan npm.<\/p><p class=\"wp-block-paragraph\">Untuk menambahkan package ke proyek Anda, jalankan salah satu command berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install &lt;package-name&gt;\n\/\/ OR\nnpm i &lt;package-name&gt;<\/pre><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Tips Berguna                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Pada perintah di atas, ganti <strong>package-name<\/strong> dengan nama modul yang ingin Anda instal.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Misalnya apabila Anda ingin menginstal <a href=\"https:\/\/www.npmjs.com\/package\/express\" target=\"_blank\" rel=\"noreferrer noopener\">express<\/a> (framework web populer yang memudahkan proses web development standar), gunakan command berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install express<\/pre><p class=\"wp-block-paragraph\">Command ini akan menginstal modul express dalam&nbsp;folder <strong>node_modules<\/strong> di direktori root proyek. Perlu diketahui bahwa <strong>node_modules<\/strong> hanya akan muncul setelah package pertama diinstal.<\/p><p class=\"wp-block-paragraph\">Kalau package berhasil diinstal, terminal akan menampilkan pesan berikut:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"870\" height=\"117\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/modul-express.png\/public\" alt=\"\" class=\"wp-image-27967\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/modul-express.png\/w=870,fit=scale-down 870w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/modul-express.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/modul-express.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/modul-express.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 870px) 100vw, 870px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Kemudian, <strong>package.json<\/strong> juga akan menyertakan modul di&nbsp;dalam kolom <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">dependencies<\/code>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\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\\\" &amp;&amp; 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><h3 class=\"wp-block-heading\" id=\"h-menginstal-package-sebagai-development-dependency\">Menginstal Package Sebagai Development Dependency<\/h3><p class=\"wp-block-paragraph\">Untuk menginstal tool apa pun yang hanya akan digunakan di&nbsp;<a href=\"\/id\/tutorial\/integrated-development-environment-adalah\/\">development environment<\/a> (lingkungan pengembangan), gunakan perintah berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install &lt;package-name&gt; --save-dev<\/pre><p class=\"wp-block-paragraph\">Contohnya Anda ingin menggunakan <a href=\"https:\/\/www.npmjs.com\/package\/nodemon\" target=\"_blank\" rel=\"noreferrer noopener\">nodemon<\/a> untuk reload proyek ketika ada perubahan pada file. Untuk menginstal tool ini, ketikkan command berikut ke terminal:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install nodemon --save-dev <\/pre><p class=\"wp-block-paragraph\">Setelah nodemon diinstal, terminal akan menampilkan pesan ini:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"856\" height=\"201\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/nodemon-sudah-terinstal.png\/public\" alt=\"\" class=\"wp-image-27969\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/nodemon-sudah-terinstal.png\/w=856,fit=scale-down 856w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/nodemon-sudah-terinstal.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/nodemon-sudah-terinstal.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/nodemon-sudah-terinstal.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">NPM juga akan menambahkan bagian <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">devDependencies<\/code> dengan data yang baru ke file <strong>package.json<\/strong> seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\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\\\" &amp;&amp; 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  \"devDependencies\": {\n    \"nodemon\": \"^2.0.12\"\n  }\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-menginstal-modul-secara-global-di-sistem\">Menginstal Modul Secara Global di Sistem<\/h3><p class=\"wp-block-paragraph\">Apabila Anda ingin menginstal package npm untuk digunakan dari command line, masukkan salah satu command berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install &lt;package-name&gt; --global\n\/\/ OR\nnpm i &lt;package-name&gt; -g<\/pre><p class=\"wp-block-paragraph\">Pastikan untuk mengganti <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">&lt;package-name&gt;<\/code> dengan nama modul Anda.<\/p><h3 class=\"wp-block-heading\" id=\"h-mengupdate-npm\">Mengupdate npm<\/h3><p class=\"wp-block-paragraph\">Agar kode dan tool Anda tetap aman dan stabil, lakukan update rutin pada package lokal dan global yang didownload dari registri npm.<\/p><p class=\"wp-block-paragraph\">Sebelum mengupdate package npm apa pun, cek apakah ada yang sudah outdated.&nbsp;Anda bisa mengecek ketersediaan update untuk package NPM dalam proyek atau sistem Anda menggunakan command ini dari direktori root:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm outdated<\/pre><p class=\"wp-block-paragraph\">Untuk mengecek package global yang outdated, jalankan command berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm outdated -g --depth=0<\/pre><p class=\"wp-block-paragraph\">Setelah mendapatkan daftar modul yang outdated, Anda bisa mengupdate semua package atau salah satunya saja.<\/p><p class=\"wp-block-paragraph\">Untuk mengupdate semua package dalam proyek Anda, jalankan perintah berikut dari command line:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm update<\/pre><p class=\"wp-block-paragraph\">Untuk mengupdate satu modul, masukkan kode ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm update &lt;package-name&gt;<\/pre><p class=\"wp-block-paragraph\">Jangan lupa untuk mengganti <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">&lt;package-name&gt;<\/code> dengan nama package yang ingin Anda update.<\/p><p class=\"wp-block-paragraph\">Untuk mengupdate semua package global di sistem, jalankan command di bawah ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm update -g<\/pre><p class=\"wp-block-paragraph\">Apabila ingin mengupdate satu package global, masukkan perintah berikut dan ganti <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">&lt;package-name<\/code>&gt; dengan nama modul Anda:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm update -g &lt;package-name&gt;<\/pre><p class=\"wp-block-paragraph\">Kalau akan mengupdate Node package manager sendiri, jalankan command berikut ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install npm@latest -g<\/pre><p class=\"wp-block-paragraph\">Setelah versi terbaru npm diinstal, jendela terminal akan menampilkan pesan seperti ini:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"599\" height=\"55\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/versi-npm-terbaru.png\/public\" alt=\"\" class=\"wp-image-27970\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/versi-npm-terbaru.png\/w=599,fit=scale-down 599w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/versi-npm-terbaru.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/12\/versi-npm-terbaru.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 599px) 100vw, 599px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Untuk mengetahui command CLI npm lainnya, lihat <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/commands\" target=\"_blank\" rel=\"noreferrer noopener\">dokumentasi command npm<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p class=\"wp-block-paragraph\">Selesai! Melalui artikel ini, Anda sudah mempelajari apa itu npm dan beberapa contoh kodenya.<\/p><p class=\"wp-block-paragraph\">Singkatnya, npm adalah package manager populer yang memungkinkan developer JavaScript saling berbagi dan menerapkan package dengan cepat dan mudah.<\/p><p class=\"wp-block-paragraph\">Setiap proyek NPM menyertakan sebuah file bernama <strong>package.json<\/strong> di direktori root miliknya. File ini berisi metadata proyek yang memungkinkan siapa pun menemukan modul di repositori NPM.<\/p><p class=\"wp-block-paragraph\">Selain berisi informasi proyek penting, <strong>package.json<\/strong>&nbsp;juga menyimpan daftar dependensi yang diperlukan agar proyek bisa dijalankan.<\/p><p class=\"wp-block-paragraph\">Package yang sudah diinstal developer untuk membantu mereka selama proses development juga akan disertakan dalam <strong>package.json<\/strong> di bawah devDependencies.<\/p><p class=\"wp-block-paragraph\">Sebagai ringkasan, berikut beberapa command NPM untuk membantu Anda memulai dan melakukan tugas-tugas dasar dengan package manager ini:<\/p><ul class=\"wp-block-list\">\n<li><strong>Mengecek versi npm:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm -v<\/pre><ul class=\"wp-block-list\">\n<li><strong>Memulai proyek:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm init<\/pre><ul class=\"wp-block-list\">\n<li><strong>Menginstal modul:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install &lt;package-name&gt;<\/pre><ul class=\"wp-block-list\">\n<li><strong>Menginstal package sebagai development dependency:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install &lt;package-name&gt; --save-dev<\/pre><ul class=\"wp-block-list\">\n<li><strong>Menginstal modul secara global pada sistem:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install &lt;package-name&gt; --global<\/pre><ul class=\"wp-block-list\">\n<li><strong>Mengupdate semua package dalam proyek:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm update<\/pre><ul class=\"wp-block-list\">\n<li><strong>Mengupdate npm ke versi terbaru:<\/strong><\/li>\n<\/ul><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install npm@latest -g<\/pre><p class=\"wp-block-paragraph\">Semoga artikel ini bisa membantu Anda memahami apa itu npm secara lebih jelas dan menggunakannya dengan benar. Kalau masih punya pertanyaan,&nbsp;jangan ragu untuk menyampaikannya lewat komentar ya.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>NPM adalah singkatan dari Node Package Manager, yaitu pengelola package yang memungkinkan developer&nbsp;JavaScript&nbsp;menemukan dan menginstal package kode ke aplikasi jaringan atau server-side. Package node.js merupakan sebuah direktori yang berisi satu atau lebih modul atau library JavaScript yang berfungsi untuk menambahkan berbagai fitur ke suatu aplikasi atau skrip.&nbsp;Tanpa package ini, software developer atau engineer harus menulis [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/apa-itu-npm\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"%title%","rank_math_description":"NPM adalah registri software populer yang digunakan developer untuk berbagi kode. Cari tahu lebih lanjut apa itu NPM di artikel ini yuk!","rank_math_focus_keyword":"apa itu npm, install npm, npm adalah","footnotes":""},"categories":[7890],"tags":[8367,8849,8664,5639],"class_list":["post-9062","post","type-post","status-publish","format-standard","hentry","category-glosarium","tag-developer","tag-linux-server","tag-npm","tag-vps"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-npm\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-npm\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/quest-ce-que-npm\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-npm\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-npm\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/http-error-when-uploading-images-to-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-npm-a-basic-introduction-for-beginners\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-npm-a-basic-introduction-for-beginners\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-npm\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-npm\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-npm\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-npm\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-npm\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-npm\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-npm\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-npm\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-npm\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/9062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=9062"}],"version-history":[{"count":19,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/9062\/revisions"}],"predecessor-version":[{"id":30059,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/9062\/revisions\/30059"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=9062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=9062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=9062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}