32:I[204091,["/_next/static/immutable/chunks/02pb8rek9_r8q.js"],"IconMark"] 2a:null 2b:["$","title",null,{"children":"Introduction to Package Management | Steve Oney | Observable"}] 30:T969,md` ## Basic npm commonds Open your terminal section (here I'm using Visual studio Code as an example):

### Installing packages 1. **Locally**: You can only access the downloads in the local folder.

*save - dev* meaning that we will save the package to package.json for development purpose. (will talk about package.json later). This is not required. 2. **Globally** : You can access the download anywhere on your machine. To install a package globally add a **-g** at the end ### Uninstalling packages Sometimes when you downloaded packages that you don't want, or packages that doesn't need in the project anymore, you can choose to uninstall the package by doing:

Note: global package can just add *-g* at the end ### Update package Sometimes the packages of installation needs to be updated, and you can do it by:

### package.json: With package.json you can manage dependencies and write scripts, this is the manifest file. To initiate a package.json file you can:

And just press enter if you want a default package.json. Example: 1. Open a terminal in Visual Studio Code:

2. Initiate a package.json, you can edit the things like description or author later on:

FileAttachment("image@6.png") A package.json should appear in your file

3. Install a package (here I used bootstrap as an example):

You should be able to see the package name inside of package.json

4. Unistall the bootstrap package

Full document of basic npm command lines can be found [here](https://docs.npmjs.com/cli/v6/commands). `31:[{"id":"e2c341af4758e6432b428fba275e4e1630240690b1a432b18759008808ce25efaaa5804e0ff43458d4cfff62832c343bcf76c4b12ebff26ea1853198edb42610","href":"https://static.observableusercontent.com/files/e2c341af4758e6432b428fba275e4e1630240690b1a432b18759008808ce25efaaa5804e0ff43458d4cfff62832c343bcf76c4b12ebff26ea1853198edb42610","name":"image@9.png","type":"image/png","lastModified":1611152900109.687,"size":15340},{"id":"15b13ca92b1caf7df3f3515d91867bbb193e4f13af6d74331d660a756fbf17404cd5f02d2b019c947131a0fec7cbef01ab0627ddac2fb5b6cba64ace9650bda0","href":"https://static.observableusercontent.com/files/15b13ca92b1caf7df3f3515d91867bbb193e4f13af6d74331d660a756fbf17404cd5f02d2b019c947131a0fec7cbef01ab0627ddac2fb5b6cba64ace9650bda0","name":"image@8.png","type":"image/png","lastModified":1611152900109.687,"size":143318},{"id":"305d945927db17f3656855a7ed07638fd97ebf16768b0b1ca7d5bae68b05dde8a9daa02d8cd06c91c79bae5f8cda1d389287a304b7ea345eedc4f6d177fbed5a","href":"https://static.observableusercontent.com/files/305d945927db17f3656855a7ed07638fd97ebf16768b0b1ca7d5bae68b05dde8a9daa02d8cd06c91c79bae5f8cda1d389287a304b7ea345eedc4f6d177fbed5a","name":"image@7.png","type":"image/png","lastModified":1611152900109.687,"size":14062},{"id":"cf3ea9731e94a1aa48e5d36eb704b75b5aaf838746a6bb340bbf448c5e93cbea8b0e0734cc2b929d8f0d14162da5eeae8a084c2a5d6c93e267f1e304fc532aac","href":"https://static.observableusercontent.com/files/cf3ea9731e94a1aa48e5d36eb704b75b5aaf838746a6bb340bbf448c5e93cbea8b0e0734cc2b929d8f0d14162da5eeae8a084c2a5d6c93e267f1e304fc532aac","name":"image@6.png","type":"image/png","lastModified":1611152900109.687,"size":200300},{"id":"04647a4157a9375189e8982221b117dcac56abdbdd7fcc7b543310e4dc89606cdc74049fe702fc464593dbf808f2ad366ef5579f58a3a60fd6bde67e1f187c98","href":"https://static.observableusercontent.com/files/04647a4157a9375189e8982221b117dcac56abdbdd7fcc7b543310e4dc89606cdc74049fe702fc464593dbf808f2ad366ef5579f58a3a60fd6bde67e1f187c98","name":"image@5.png","type":"image/png","lastModified":1611152900109.687,"size":310686},{"id":"e0de29919bfabd619e4a64f94ae9f26de6cd76e31472b7e971c3102a4c9dd6781f2433c98d218b80b7ffc5a04f2d3879076338c46857734dd4c81a2ed0d6e69a","href":"https://static.observableusercontent.com/files/e0de29919bfabd619e4a64f94ae9f26de6cd76e31472b7e971c3102a4c9dd6781f2433c98d218b80b7ffc5a04f2d3879076338c46857734dd4c81a2ed0d6e69a","name":"image@4.png","type":"image/png","lastModified":1611152900109.687,"size":8189},{"id":"79bb05d9555d87da0cba8fa48dfa3ec42e48c8589435b2310eea62cd40effef18e496a2ab4cdc17e59ecb8ccb61def0a609e646c453a55d1bf8c7353bb610db9","href":"https://static.observableusercontent.com/files/79bb05d9555d87da0cba8fa48dfa3ec42e48c8589435b2310eea62cd40effef18e496a2ab4cdc17e59ecb8ccb61def0a609e646c453a55d1bf8c7353bb610db9","name":"image@3.png","type":"image/png","lastModified":1611152900109.687,"size":13257},{"id":"dff63029ab5a862112dafdbde9dd7ee5280ac12e8367a3de53052f339496d1dab586e1f1e7a84f3f61569758d4913ba223b9fc6f3b41bbe9eb1cf328c470f417","href":"https://static.observableusercontent.com/files/dff63029ab5a862112dafdbde9dd7ee5280ac12e8367a3de53052f339496d1dab586e1f1e7a84f3f61569758d4913ba223b9fc6f3b41bbe9eb1cf328c470f417","name":"image@2.png","type":"image/png","lastModified":1611152900109.687,"size":13009},{"id":"587f0eda22d673e101ef97658bec5b7012c08c0a4b8f5e5e3aab3f30d4fbbb856332d9f691c90acde891acf8e8f8dfe18109e5682de92f463733b39f69caaa10","href":"https://static.observableusercontent.com/files/587f0eda22d673e101ef97658bec5b7012c08c0a4b8f5e5e3aab3f30d4fbbb856332d9f691c90acde891acf8e8f8dfe18109e5682de92f463733b39f69caaa10","name":"image@11.png","type":"image/png","lastModified":1611152900109.687,"size":20350},{"id":"ba209038cceb08238070a0ffdd96a5cf0bc014528d96be1c349bcd823f980c6454c7aa30f123254c611b2b6d5b1f2351ab77a82e6fe8b8c9278f6a8354218882","href":"https://static.observableusercontent.com/files/ba209038cceb08238070a0ffdd96a5cf0bc014528d96be1c349bcd823f980c6454c7aa30f123254c611b2b6d5b1f2351ab77a82e6fe8b8c9278f6a8354218882","name":"image@10.png","type":"image/png","lastModified":1611152900109.687,"size":62156},{"id":"2b161cd9e81e02e0f44d2fb26c6a65dca59c57f06ad01acdcf57e7e998f7d1495ff0099cb0a1d1bf6cb07644625b06bb4416c61d5123e92c468b072b7675d071","href":"https://static.observableusercontent.com/files/2b161cd9e81e02e0f44d2fb26c6a65dca59c57f06ad01acdcf57e7e998f7d1495ff0099cb0a1d1bf6cb07644625b06bb4416c61d5123e92c468b072b7675d071","name":"image@1.png","type":"image/png","lastModified":1611152900109.687,"size":14785},{"id":"67adbbee1481a54b52cf485fbfde154c51de2f6fa0c52710bf380a3b152a98a43fb039b1e11bcfc804344334fb037bad8950ec70017c548d1ed78a5718905109","href":"https://static.observableusercontent.com/files/67adbbee1481a54b52cf485fbfde154c51de2f6fa0c52710bf380a3b152a98a43fb039b1e11bcfc804344334fb037bad8950ec70017c548d1ed78a5718905109","name":"image.png","type":"image/png","lastModified":1611152900109.687,"size":46466}] 2e:{"id":"9f6287f138a6da34","slug":"introduction-to-package-management","title":"Introduction to Package Management","thumbnail":"88c85ed4d1bebfe1ce076d1f380481b8bf9386a6029dd7c754e8fd0f9b4a38af","access_level":"public","create_time":"$D2020-12-30T20:27:05.329Z","update_time":"$D2023-10-02T17:43:42.584Z","view_time":null,"first_public_time":"$D2020-12-30T20:27:06.281Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":22,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Introduction to Package Management","cells":[{"id":0,"value":"md`# Introduction to Package Management`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"toc()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n## Command Lines\nCommend lines are what we send to our computers in the form of lines of text. It's quite handy when you get used to using it. And today we will be focusing more on npm commonds.\n\n## npm commands\nnpm is a package manager for the JavaScript programming language, it is an online repository for the open-source Node.js projects, it is also a command-line utility for interacting with said repository that aids in package installation, version management, and dependency management (reference from [Node.js](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/)).\n\nnpm comes with **Node.js**, so if you don't have it installed, install Node.js right [here](https://nodejs.org/en/).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`\n### What is package.json\nPackage.json is a list for the packages that you project uses. It have a list of packages and their specific version. It also make your project easier to share with other developers since it makes your build reproducible. Other people can just use *npm install* to install all the packages. \n\n

\n\nFor now, the dependencies are the most important part of the package.json file. This has the list of all your package and their version. Sometimes you need to update or downgrade your packages for certain browsers or for it to work. \n\nWhen you got a new project with a package.json file, you can just run *npm intall* to intall all the packages needed for the project.\n\nYou can find a detailed explanation of package.json [here](https://blog.ezekielekunola.com/understanding-the-package.json-file).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body" 23:null 27:[["$","title","0",{"children":"Introduction to Package Management | Steve Oney | Observable"}],["$","meta","1",{"property":"og:title","content":"Introduction to Package Management"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Steve Oney"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@soney/introduction-to-package-management"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/88c85ed4d1bebfe1ce076d1f380481b8bf9386a6029dd7c754e8fd0f9b4a38af.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Introduction to Package Management"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Steve Oney"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/88c85ed4d1bebfe1ce076d1f380481b8bf9386a6029dd7c754e8fd0f9b4a38af.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L32","17",{}]]