npm과 lite-server로 HTML, CSS 실습관경 만들기
| NPM 사용해보기
다음과 같이 html 파일을 만듭니다.
.
└── index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>This is first npm usage</h1>
<p>
npm is the greatest tool in javascript ecosystem
</p>
</body>
</html>
다음과 같은 명령어를 치면 npm을 이용하여 현재 node.js의 프로젝트의 의존성과 프로젝트 정보를 관리하는 package.json 파일을 손쉽게 생성할 수 있습니다. 원래는 index.js를 진입점으로 보통 정하지만 여기서는 html 파일을 진입점으로 정하겠습니다.
npm initname: (bootstrap-coursera)
version: (1.0.0)
description:
entry point: (index.js) index.html
test command:
git repository: (https://github.com/engkimbs/bootstrap-coursera.git)
keywords:
author: saelobi
license: (ISC)
About to write to /home/saelobi/WebstormProjects/bootstrap-coursera/package.json:
{
"name": "bootstrap-coursera",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/engkimbs/bootstrap-coursera.git"
},
"author": "saelobi",
"license": "ISC",
"bugs": {
"url": "https://github.com/engkimbs/bootstrap-coursera/issues"
},
"homepage": "https://github.com/engkimbs/bootstrap-coursera#readme",
}
다음과 같이 package.json 파일이 만들어집니다.
.
├── index.html
└── package.json
| lite-server 사용 및 프로젝트 의존성 추가
lite-server는 Node.js 기반의 경량 웹서버입니다. html 또는 javascript 변경을 감지하고 socket을 이용하여 css 변경을 주입하는 등의 유용한 기능을 제공하죠.
아래와 같은 명령어를 입력하면 lite-server가 node_modules(node.js 프로젝트의 의존성을 모아놓은 디렉터리) 디렉터리에 설치됩니다. --save-dev 옵션은 현재 프로젝트 모듈에 lite-server 모듈을 설치하고 pakcage.json 의존성 정보를 업데이트해줍니다.
npm install lite-server --save-dev
다음과 같이 node_modules가 생성됩니다.
.
├── index.html
├── node_modules
└── package.json
아래와 같이 devDependencies가 추가되며 현재 프로젝트에 의존성이 추가된 것을 볼 수 있습니다.
{
"name": "bootstrap-coursera",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/engkimbs/bootstrap-coursera.git"
},
"author": "saelobi",
"license": "ISC",
"bugs": {
"url": "https://github.com/engkimbs/bootstrap-coursera/issues"
},
"homepage": "https://github.com/engkimbs/bootstrap-coursera#readme",
"devDependencies": {
"lite-server": "^2.4.0"
}
}
그리고 scripts 속성에 start 속성에 대한 정보를 입력하여 현재 node.js 프로젝트를 npm을 통해 구동할 시 실행될 명령어를 입력합니다.
"scripts": {
"start": "npm run lite",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server"
},
npm을 구동하면 자동적으로 list-server가 구동되면서 자동적으로 index.html이 웹브라우져에 로딩됩니다.
npm start
'JavaScript BackEnd > Node.js, Express' 카테고리의 다른 글
| [NodeJs] 외부모듈활용 - Express를 활용해 간단한 Framework 만들기. (Router/GET/POST) (2/3) (0) | 2021.04.30 |
|---|---|
| [NodeJs] 외부모듈활용 - Express를 활용해 간단한 Framework 만들기. (1/3) (0) | 2021.04.30 |
| [NodeJs] 외부모듈활용 - Aync (0) | 2021.04.30 |
| [NodeJs] 외부모듈사용하기 - EJS 모듈 (0) | 2021.04.29 |
| Node.js 및 NPM(Node Package Manager) 개요 (0) | 2021.03.29 |
| nodejs 테스트 도구와 방법론 (테스트의 중요성, 전략, mocha, chai, sinon, istanbul, 유용한 팁) (0) | 2021.03.18 |
| ejs (문법, include, nodejs와 연동) (0) | 2021.03.18 |
| body-parser 모듈 (urlencoded, extended 옵션) (0) | 2021.03.18 |