게시 됨 업데이트 됨Programming / Nodejs8분안에 읽기 (약 1224 단어)

NPM 으로 빌드 수행하기

build with npm

프론트엔드 개발 결과를 빌드할 때 gulp 와 npm 을 이용해 수행한다.

grunt, gulp 로 빌드할 때 불편한 점

  • grunt, gulp는 wrapper로 실제 툴을 npm과 혼용하는게 좋다
    • gulp-sass는 node-sass 의 wrapper이다.
  • 실제 사용하는 하부 모듈의 버전을 확인해야 한다.
  • 이런 빌드 툴은 새로운 태스크를 추가하려면 많은 의존성을 해결해야 한다.
    • npm으로 && 연결로 해결
  • Grunftfile.js 스크립트 대신 package.json 만 있으면 된다.
  • package.json에 명령을 추가할 수 있다.

npm 기본

–version or -v
–global as -g
–save as -S
–save-dev as -D

Outdated module

현재 package.json 에 설치된 버전과 명시된 버전 그리고 최신 버전과 차이를 알 수 있다.

1
2
3
4
npm outdated
Package                  Current  Wanted  Latest  Location
body-parser               1.15.2  1.15.2  1.18.2  application-name
debug                      0.7.4   0.7.4   3.1.0  application-name

최신 버전으로 설치를 하려면 package.json을 버전코드로 변경하고 업데이트를 진행한다.

모든 패키지를 업데이트할 수 있다.

1
2
3
npm update
+ mongoose@4.13.1
added 1 package, removed 4 packages and updated 2 packages in 32.975s

특정 모듈만 업데이트하려면 패키지를 명시하면 된다.

1
npm update debug

프로젝트 시작

프로젝트를 위해 폴더를 만들고 npm init 으로 초기화 한다. package.json 파일 생성 부터 묻는데, 응답이 귀잖고 즉시 초기화를 할 것이면 –yes 옵션을 사용한다.

1
2
$ mkdir hellonpm && cd hellonpm
$ npm init --yes

현재 폴더에 package.json 의 골격이 생성된다:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "hellonpm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

test 스크립트가 생성되어 있는데 실행해 본다:

1
2
3
4
$ npm test
> hellonpm@1.0.0 test /home/qkboo/Lectures/lecture_node/npm/hellonpm
> echo "Error: no test specified" && exit 1
...

node_modules 가 없다고 나오는데, 빌드를 위해 dev-dependencies 를 먼저 설치한다.

1
$ npm i -D jshint lite-server mocha concurrently node-sass uglify-js
  • -D : Package will appear in your devDependencies

패키지 디렉토리

package.json에 의존성 패키지가 명시되면 패키지 버전이 명시되는데 이 방법을 Semantic Versioning(Semver)라고 한다. started/semantic-versioning 참고한다.

npm install 명령으로 모듈이 설치되면 아래 같은 구조를 갖는다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── photo-gallery/
└───── node_modules/
        └───── modaal/
                ├───── demo/
                │       ├───── css/
                │       ├───── img/
                │       └───── js/
                ├───── dist/
                │       ├───── css/
                │       └───── js/
                └───── source/
                        ├───── css/
                        └───── js/
                               └───── lib/

스크립트

package.json 의 scripts 에 태스크를 추가한다. 필요한 테스트 모듈은 …

lite-server

Node 서버 개발시 실시간 리로딩과 browser-sync (lite-server의 하부 모델)를 이용해 HTML, CSS, JS 를 테스트한다.

https://www.npmjs.com/package/lite-server

1
2
3
$ npm install lite-server --save-dev
# or yarn
$ yarn add lite-server --dev

package.json에 lite-server 스크립트를 추가하자

1
2
3
4
"scripts": {
  ...
  "dev": "lite-server"
}

그리고 npm run dev 로 테스트를 시작한다.

browser-sync는 cross-browser checking도 지원한다. 자세한 것은 https://www.npmjs.com/package/light-server 참조

json-server

json-server는 Fake REST API로 여기를 참조: https://scotch.io/tutorials/json-server-as-a-fake-rest-api-in-frontend-development

설치

1
$ npm install -D json-server

스크립트는,

1
2
3
4
"scripts": {
    ...
    "db": "json-server --watch db.json --port 3005"
  }

테스트 실행은

1
2
$ npm run db

concurrently

여러 명령을 쉽게 실행하게 해준다.

https://www.npmjs.com/package/concurrently

테스트 스크립트에 다른 테스크를 동시에 실행하도록 해준다.

1
2
3
4
"scripts": {
    ...
    "start": "concurrently -k \"npm run dev\" \"npm run db\""
  }

concurrently 를 쓰기 싫다면 && 로 묶어서 실행해도 된다.

uglify

javascript 파일을 minify 해서 저장하도록 해준다.

1
2
3
4
"scripts": {
 ...
 "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js"
}

lint

1
2
3
4
"scripts": {
  ...
  "lint": "jshint src/**.js"
}

sass

1
2
3
4
"scripts": {
  ...
  "sass": "node-sass --include-path scss scss/main.scss assets/main.css"
}

mocha

mocha는 javascript 테스트 프레임워크로 npm test shorthand for npm run test.

1
2
3
4
"scripts": {
  ...
  "test": "mocha test"
}

bash

쉘 스크립트로 만든 명령을 실행해 준다.

1
2
3
4
"scripts": {
  ...
  "bash": "Location of the Bash/Shell script file"
}

rimraf

여러 계층의 파일/디렉토리를 지울 수 있는 모듈.

https://www.npmjs.com/package/rimraf

Boilerplate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"scripts": {

"start": "concurrently -k \"npm run dev\" \"npm run watch-css\"",

"dev": "lite-server",
"db": "json-server --watch db.json --port 3005",

"build-js": "mkdir -p dist/js && uglifyjs src/js/\*.js -m -o dist/js/app.js",

"lint": "lint jshint src/**/**.js",

"build-css": "node-sass --include-path scss scss/main.scss assets/main.css",
"watch-css": "nodemon -e scss -x \"npm run build-css\"",

"test": "mocha test",
"pretest": "npm run lint",
"posttest": "echo the test has been run!",

"bash": "Location of the bash/shell script file"

"clean": "rimraf ./dist/\*"
}

참조

NPM 으로 빌드 수행하기

https://blog.thinkbee.kr/build-npm-47baca25fd06/

Author

Gangtai Goh

Posted on

2017-09-06

Updated on

2023-01-14

Licensed under

#

이 글이 마음에 드시나요? 다음을 통해 후원하실 수 있습니다:

댓글

카탈로그

최근 글

광고

×