Package.json 생성과 npm 사용법 기본

package.json 생성

package.json을 생성한다는 것은 프로젝트를 새로 정의하겠다는 의미와 같다. 아래 명령어로 package.json 파일을 생성하여 프로젝트를 초기화 한다.

$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (chap01_javascript) test
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\dev\edu-react-js-multicampus\20220919_React-main\sample\Chap01_JavaScript\package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)

아래와 같이 여러가지를 물어본다. 전부 나중에 수정할 수 있으므로 엔터 치고 넘어가도 된다.

• package name: 프로젝트 이름
• version: 버전
• description: 설명
• entry point: 루트가 되는 파일
• test command:
• git repository: git url
• keywords: 프로젝트에 대한 키워드 (검색시 활용)
• author: 소유자
• license: (ISC)

npm 기초

모듈을 설치해보자. 여기서는 jquery를 설치해본다.

$ npm search jquery

일단 모듈이 있는지 검색한다.

NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
jquery                    | JavaScript library…  | =dmethvin…      | 2022-08-26 | 3.6.1    | jquery javascript browser library
ua-parser-js              | Detect Browser,…     | =faisalman      | 2021-10-27 | 1.0.2    | user-agent parser browser engine os device cpu jquery-plugin ecosystem:jobject.assign             | ES6 spec-compliant…  | =ljharb         | 2022-08-16 | 4.1.4    | Object.assign assign ES6 extend $.extend jQuery _.extend Underscore es-scheerio                   | Tiny, fast, and…     | =jugglinmike…   | 2022-06-26 | 1.0.0-r… | htmlparser jquery selector scraper parser html
jquery-ui                 | A curated set of…    | =scott.gonzalez… | 2022-07-14 | 1.13.2   | 
papaparse                 | Fast and powerful…   | =mholt =pokoli  | 2022-03-15 | 5.3.2    | csv parser parse parsing delimited text data auto-detect comma tab pipe 
jquery-migrate            | Migrate older…       | =krinkle…       | 2022-03-24 | 3.4.0    | jquery javascript browser plugin migrate
bootstrap-select          | The jQuery plugin…   | =caseyjhol      | 2020-06-26 | 1.13.18  | javascript jquery form bootstrap dropdown select replacement
crawler                   | Crawler is a web…    | =sylvinus…      | 2020-11-23 | 1.3.0    | dom javascript crawling spider scraper scraping jquery crawler nodejs   
jquery.cookie             | A simple,…           | =carhartl       | 2014-04-27 | 1.4.1    |
jquery-mask-plugin        | A jQuery Plugin to…  | =igorescobar    | 2019-07-31 | 1.14.16  | mask masks form input jquery-plugin
extend                    | Port of…             | =justmoon…      | 2018-07-19 | 3.0.2    | extend clone merge
urijs                     | URI.js is a…         | =rodneyrehm     | 2022-04-03 | 1.19.11  | uri url urn uri mutation url mutation uri manipulation url manipulation 
mark.js                   | Highlight keywords…  | =julmot         | 2018-01-11 | 8.11.1   | mark.js markjs mark jquery.mark jmHighlight highlight search jquery javajquery-validation         | Client-side form…    | =jzaefferer…    | 2022-07-01 | 1.19.5   | jquery jquery-plugin forms validation validate
inputmask                 | Inputmask is a…      | =robinherbots   | 2021-12-30 | 5.0.7    | form input inputmask jquery jquery-plugin mask plugins
jquery.maskedinput        | jQuery Masked Input… | =excellalabs-a… | 2015-10-01 | 1.4.1    | jQuery Masked Input Plugin
jquery.json-viewer        | jQuery plugin for…   | =abodelot       | 2022-05-09 | 1.5.0    | jquery-plugin json json-viewer json2html
jquery-form               | The jQuery Form…     | =ekkis…         | 2020-06-07 | 4.3.0    | jquery ajax jquery-plugin json json-form html-form form jquery-form ecostoastr                    | ToastrJS is a…       | =timferrell     | 2017-12-08 | 2.1.4    | Toastr ToastrJS toastr.js

이름이나 키워드에 jquery 가 포함된 모듈들을 보여준다. 가만 보면 항목들이 package.json 생성할 때 기입했던 항목들이다.

$ npm info jquery

자세한 정보를 보고 싶으면 info 명령어를 사용한다.

jquery@3.6.1 | MIT | deps: none | versions: 54
JavaScript library for DOM operations
https://jquery.com

keywords: jquery, javascript, browser, library

dist
.tarball: https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz
.shasum: fab0408f8b45fc19f956205773b62b292c147a16
.integrity: sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==
.unpackedSize: 1.3 MB

maintainers:
- dmethvin <dave.methvin@gmail.com>
- timmywil <4timmywil@gmail.com>
- mgol <m.goleb@gmail.com>
- openjsfoundation <npm@openjsf.org>

dist-tags:
beta: 3.6.1    latest: 3.6.1

published 3 weeks ago by timmywil <4timmywil@gmail.com>

info 결과

$ npm info jquery version

버전만 알고 싶을 때 사용한다.

$ npm info jquery versions

모든 버전을 알고 싶을 때 사용한다.

$ npm i jquery@3.1.0

특정 버전으로 설치할 때 사용한다.

설치

$ npm i -g jquery

-g 옵션은 글로벌 설치를 의미하며, PC 어디에서나 접근 가능하다. 하지만 글로벌 설치를 사용하면 나중에 프로젝트 package.json에 포함 안되는 문제가 생길 수 있다.

$ npm i jquery

가장 일반적인 설치 형태. 현재 위치한 프로젝트에 설치.

$ npm i jquery --save

--save는 package.json에 기록 할 것 인지를 결정. 최근에는 명시 안 해도 기록되도록 변경되었다.

$ npm i jquery --save-dev

--save-dev는 dev-dependency 에 기록할 것 인지 결정. dev-dependency는 개발 환경에서만 필요한 의존성을 의미한다. 예를 들면 ESLint 같은 경우, 개발할 때 편리하게 사용하지만 실제 배포할 때는 프로그램 구동에 의미가 없는 모듈이다.

$ npm i jquery -D

-D 는 --save-dev 와 동일하다.

$ npm un -g jquery

글로벌 모듈을 삭제한다.

$ npm un jquery

프로젝트 모듈을 삭제한다.

$ npm list jquery

설치된 모듈 정보를 출력한다.