parcel - webapp 설치

IT 일반

by 폴리프레임 2024. 5. 30. 14:21

1. 프로젝트 폴더를 만들고, 안에서 다음 명령어를 실행한다.

npm install --save-dev parcel

node_modules 폴더와 package-lock.json, package.json 파일이 생긴다.

// package.json

{
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

2. 시작점으로 사용될 src/index.html 을 만든다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

개발서버가 설치되었으므로, 페이지에 변화를 주면 자동으로 리빌드 됩니다. 실행을 위해서 다음 명령을 실행 합니다.

npx parcel src/index.html

아래와 같이 나타나면 연결에 성공한 것으로, 아래 링크를 타고 들어가면 페이지를 볼 수 있으며, 페이지에 변화가 있으면 웹 페이지에 즉시 반영이 됩니다.

PS D:\bundlers\parcel-webapp> npx parcel src/index.html
Server running at http://localhost:1234
✨ Built in 1.79s

css 파일과 JavaScript 파일 붙이기

// src/style.css

h1 {
  color: hotpink;
  font-family: cursive;
}

// src/main.js

console.log('Hello Parcel!');

// src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="app.js" defer></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Package scripts

{
  "source": "src/index.html", // 시작 지점
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

이제는 npx parcel src/index.html 으로 명령하는 것이 아니라, scripts를 이용하여 간단히 다음과 같이 할 수 있습니다.

npm start

npm run build

Library 를 만드는 것도 유사한 형태로 할 수 있습니다. 아래 사이트에서 확인 가능합니다.

https://parceljs.org/docs/

저작자표시 비영리 변경금지 (새창열림)

'IT 일반' 카테고리의 다른 글

navigator - BOM (0)	2024.06.04
.json 과 .json5 의 차이점 (1)	2024.06.03
webpack 개념 (0)	2024.05.30
Java를 이용한 웹 (0)	2024.05.18
파이썬의 웹 (0)	2024.05.18