웹사이트 검색

Parcel.js로 웹 앱을 묶는 방법


소개

사이트나 웹 애플리케이션을 개발할 때 코드를 더 작고 관리하기 쉬운 청크로 분리하는 것이 좋습니다. 프로덕션 환경에서 모든 리소스를 개별적으로 요청하면 애플리케이션 속도가 느려질 수 있습니다. 번들러는 코드를 단일 파일로 결합 및 병합하여 이러한 대기 시간 문제를 해결하는 데 사용되는 도구입니다. 이렇게 하면 해당 리소스에 대한 서버에 대한 HTTP 요청의 양이 제한됩니다. 번들러를 사용하면 사용자와 개발자 모두의 경험을 최적화하는 데 유용합니다.

Parcel.js는 오픈 소스 번들러입니다. Typescript 및 SASS와 같은 널리 사용되는 많은 언어를 지원하며 이미지 및 글꼴과 같은 파일 형식도 처리할 수 있습니다. Parcel에는 개발 서버, 진단, 축소 및 이미지 압축과 같은 몇 가지 추가 도구가 내장되어 있습니다. 프로젝트에 추가 구성이 필요한 경우 Parcel의 다양한 플러그인을 사용할 수 있습니다.

이 자습서에서는 Parcel을 사용하여 HTML, CSSJavaScript 파일이 포함된 작은 웹 응용 프로그램을 빌드하고 묶습니다. 텍스트 편집기와 터미널을 번갈아 사용하여 작업하게 됩니다. 또한 사용자 지정 npm 스크립트로 Parcel을 구성하여 애플리케이션 실행 및 빌드를 지원하는 방법도 배웁니다.

전제 조건

이 자습서를 따르려면 다음이 필요합니다.

  • HTML, CSS 및 JavaScript에 대한 이해. JavaScript로 코딩하는 방법 자습서 시리즈에서 이에 대해 배울 수 있습니다.
  • Visual Studio Code와 같은 텍스트 편집기. 원하는 텍스트 편집기를 사용할 수 있습니다.
  • 단말기에 익숙합니다. 터미널을 사랑하는 법 배우기 가이드에서 터미널 사용 방법을 배울 수 있습니다.
  • 로컬 시스템에 설치된 Node.js. 특정 환경에 대한 Node.js 설치 및 로컬 개발 환경 생성 방법 자습서를 따르십시오.

컴퓨터에 Node.js를 설정하면 다음 단계를 시작할 준비가 된 것입니다.

1단계 - Parcel Bundler 설치

이 자습서에서는 your_project를 작업 디렉터리로 사용하지만 자유롭게 이름을 바꾸거나 자신의 프로젝트 폴더를 사용할 수 있습니다. 원하는 텍스트 편집기와 터미널 또는 명령 프롬프트를 열고 다음 단계를 계속하기 전에 프로젝트의 최상위 디렉토리에 있는지 확인하십시오.

your_project 디렉토리 내에서 터미널 또는 명령 프롬프트를 사용하여 npm init 명령으로 프로젝트를 초기화합니다.

  1. npm init

이 명령은 프로젝트에 대한 일련의 프롬프트를 트리거합니다. ENTER를 눌러 각 질문 사이를 이동하거나 기본값을 원하는 설정으로 변경할 수 있습니다. 완료하고 기본 설정을 변경하지 않은 경우 텍스트 편집기에서 볼 수 있는 다음 정보가 포함된 package.json 파일이 생성됩니다.

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

다음으로 --save-dev 플래그를 사용하여 Parcel 번들러를 로컬로 설치합니다.

  1. npm install --save-dev parcel

--save-dev 플래그는 설치 패키지를 개발 종속성으로 저장합니다. 이는 프로젝트가 개발 프로세스 중에 Parcel에 의존하여 응용 프로그램을 관리하고 생성한다는 것을 의미합니다.

설치되면 추가 package-lock.json 파일과 node_modules 디렉토리가 프로젝트에 포함됩니다. package-lock.json 파일은 npm 설치 시 자동으로 생성됩니다. 프로젝트가 제대로 작동하기 위해 의존하는 모든 종속성을 설명합니다. 이 파일이 가지고 있는 정보에 관심이 있다면 npm 문서를 파헤칠 수 있습니다. package-lock.json 파일과 마찬가지로 node_modules 폴더에는 프로젝트가 의존하는 다양한 패키지가 모두 들어 있습니다. 그러나 이 시나리오에서 자동으로 생성된 파일은 직접 편집할 수 없습니다.

package.json 파일에서 이제 개발 종속성으로 parcel이 포함되어 있음을 확인하십시오.

...
"devDependencies": {
    "parcel": "^2.7.0"
  }
…

Parcel 번들러가 로컬 종속성으로 설치되었으므로 이제 애플리케이션 작업을 시작할 준비가 되었습니다.

2단계 - 애플리케이션 파일 생성

다음 예제에서는 버튼을 클릭할 때 배경색을 변경하는 작은 응용 프로그램을 만듭니다. Parcel은 이러한 애플리케이션 파일이 생성된 후 프로젝트에 구현됩니다.

Parcel은 애플리케이션의 진입점으로 모든 파일을 허용할 수 있습니다. 진입점 파일은 애플리케이션 실행이 시작되는 곳입니다. 이 진입점에서 Parcel은 CSSJavaScript 파일에 대한 링크를 포함하여 사용자가 가리키는 모든 종속성을 사용하여 애플리케이션을 빌드합니다. 애플리케이션의 진입점으로 index.html HTML 파일을 사용하게 됩니다.

텍스트 편집기를 사용하여 your_project 디렉토리 내에 src 폴더를 만들어 코드를 보관하고 구성합니다. Visual Studio Code를 사용하는 경우 your_project 디렉토리 내부를 마우스 오른쪽 버튼으로 클릭하고 새 폴더를 선택하고 이름을 src로 지정합니다.

해당 src 폴더 내에서 index.html 파일을 만듭니다. Visual Studio Code에서 src 폴더 내부를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 선택합니다. 이 파일의 이름을 index.html로 지정합니다.

index.html 파일에 다음 줄을 포함합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Your Parcel Project</title>
  </head>
  <body>
    <h1>Welcome to Parcel!</h1>

    <div class="sammy-wrapper">
      <div class="img-wrapper sammy-1">
        <img src="https://assets.linux-console.net/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
      </div>
    </div>
    
    <button>Change the Background Color</button>

    <script type="module" src="js/app.js"></script>
  </body>
</html>

이 HTML 파일은 애플리케이션의 랜딩 페이지입니다. 여기에는 스타일시트 및 스크립트에 대한 링크가 포함됩니다. 이러한 파일은 코드를 분리하고 체계적으로 유지하기 위해 각각의 폴더에 저장됩니다. 업데이트 후 파일을 저장하는 것을 잊지 마십시오. VS Code에서 CTRL+S 또는 CMD+S를 눌러 파일을 저장할 수 있습니다.

src 디렉토리 내에 css라는 다른 폴더를 만듭니다. 그런 다음 css 폴더 안에 style.css라는 CSS 스타일시트를 만듭니다. :

style.css 파일에 다음 CSS를 포함합니다.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  color: white;
  background: var(--bg, rgb(26, 80, 190));
  font-size: 16px;
}
h1 {
  font-size: 3rem;
  padding: 2rem;
}
.img-wrapper {
  max-width: 600px;
  padding: 0 1rem;
  margin: 2rem;
  cursor: pointer;
}
.img-wrapper img {
  width: 100%;
}
button {
  font-size: inherit;
  font-size: 1rem;
  padding: .5rem;
  margin: 8rem 0;
}

이 파일을 저장하는 것을 잊지 마십시오.

다음으로 src 디렉토리 안에 JavaScript 코드를 보관할 js 폴더를 만듭니다.

js 폴더 내에서 다음 코드를 사용하여 app.js 파일을 만듭니다.

const btn = document.querySelector('button');
const body = document.querySelector('body');

let availableColors = ['darkslateblue', 'midnightblue', 'teal', 'tomato', 'seagreen', 'royalblue', 'saddlebrown', 'indigo', 'olivedrab', 'rosybrown'];

btn.addEventListener('click', function() {
  const randomizeColor = Math.floor(Math.random() * availableColors.length);
  body.style.setProperty('--bg', availableColors[randomizeColor]);
});

JavaScript 코드는 availableColors 배열에서 색상을 임의로 선택한 다음 클릭 시 배경을 해당 색상으로 변경합니다.

수정 후 이 파일을 저장합니다.

전체적으로 현재 사이트 아키텍처는 다음과 같습니다.

your_project/
|── node_modules
|── src/
|   |── css/
|   |   |── style.css
|   |── js/
|   |   |── app.js
|   |── index.html
|── package.json
|── package-lock.json

애플리케이션의 필수 요소가 생성되었으므로 이제 Parcel을 사용하여 애플리케이션을 보고 구성할 수 있습니다.

3단계 - 개발 서버에서 애플리케이션 실행

애플리케이션을 보는 한 가지 방법은 브라우저에서 HTML 파일을 여는 것입니다. 그러나 파일을 변경한 경우 변경할 때마다 브라우저를 수동으로 새로 고쳐야 합니다. Parcel은 컴퓨터에서 실행되는 개발 서버와 함께 제공됩니다. 개발 서버가 실행 중일 때 코드를 변경하면 Parcel은 새로고침할 필요 없이 브라우저에서 애플리케이션을 자동으로 업데이트합니다. 이를 종종 핫 리로딩이라고 합니다. 이렇게 하면 서버를 중지하고 변경 사항을 적용한 다음 서버를 다시 시작하여 변경 사항을 볼 필요가 없습니다.

예를 들어 Parcel 개발 서버가 실행 중인 경우 your_project/src/css/style.css 스타일시트에서 background 속성을 변경할 수 있습니다. red로 변경하고 변경 사항을 저장합니다. 저장하면 개발 서버를 중지하거나 새로고침할 필요 없이 브라우저에서 즉시 변경 사항을 확인할 수 있습니다.

터미널에서 your_project 디렉토리 안에 있는지 확인합니다. your_project 디렉터리에 있으면 다음 코드를 실행하여 개발 서버를 시작합니다.

  1. npx parcel src/index.html
Output
❯ npx parcel src/index.html Server running at http://localhost:1234 ✨ Built in 5ms

이제 Parcel의 내장 개발 서버가 실행 중입니다. npx 소포 명령은 src/index.html의 진입점을 가져와 필요한 자산으로 애플리케이션을 빌드합니다. 출력은 또한 애플리케이션이 http://localhost:1234에서 실행 중임을 나타냅니다.

실행 중인 애플리케이션을 보려면 웹 브라우저를 열고 http://localhost:1234로 이동합니다.

your_project 디렉토리 내에서 npx 소포 명령을 실행했을 때 두 개의 새 폴더가 생성되었습니다. .parcel-cache 폴더에는 프로젝트에 대한 정보가 들어 있으며 Parcel에서 응용 프로그램을 다시 빌드하는 데 사용됩니다. 파일을 변경하면 Parcel은 이러한 변경 사항을 감지하고 처음부터 시작하는 대신 이러한 파일로 빌드를 다시 실행합니다.

다른 폴더인 dist에는 Parcel이 생성한 동적으로 생성된 파일이 들어 있습니다. 이 폴더에는 HTML, CSSJavaScript 파일이 포함되어 있지만 모두 사이에 임의의 문자가 있는 index라는 이름이 지정되어 있습니다. .map 파일도 포함되어 있습니다. Parcel은 npx Parcel 명령을 사용할 때 소스 맵이라는 것을 생성합니다. 소스 맵은 번들 코드에서 원본 소스 코드를 찾는 방법을 브라우저에 알려줍니다. 개발 및 프로덕션에서 코드 디버깅을 지원하는 데 사용됩니다.

명확하게 하기 위해 이러한 파일 내에서 어떤 작업도 수행하지 않습니다. 실제로 이 폴더를 삭제하면 .parcel-cachedist 폴더가 모두 자동으로 생성되어 npx 소포 를 실행할 때 업데이트됩니다. 다시 명령하십시오.

참고: 때로는 코드를 크게 편집할 때 이러한 변경 사항이 브라우저에 반영되지 않는 것을 알 수 있습니다. 이 경우 브라우저를 새로 고칠 수 있습니다. 여전히 문제가 있는 경우 터미널에서 CTRL+C를 눌러 서버 실행을 중지하십시오. 그런 다음 .parcel-cachedist 폴더를 삭제합니다. .parcel-cache 폴더는 이전 코드의 잔재를 잠재적으로 보유할 수 있으며 이를 제거하면 문제점을 제거할 수 있습니다. 이를 삭제한 후 npx 소포 src/index.html 명령을 다시 실행하십시오. 이렇게 하면 업데이트된 코드로 .parcel-cachedist 폴더와 파일이 재생성됩니다.

새 폴더와 파일 검사를 마쳤으면 터미널이나 명령 프롬프트에서 CTRL+C를 눌러 서버 실행을 중지합니다.

4단계 — 응용 프로그램을 시작하고 구축하기 위한 npm 스크립트 만들기

개발 서버를 확인하고 싶을 때마다 터미널 내부에서 npx 소포 src/index.html 명령을 실행하는 대신 package.json 코드 내부에 npm 스크립트를 생성할 수 있습니다. 파일을 사용하여 이 반복 작업을 실행하고 이 단계를 자동화합니다. 프로덕션 준비가 되면 애플리케이션을 빌드하기 위한 추가 스크립트를 포함할 수도 있습니다.

텍스트 편집기에서 your_project/package.json 파일을 열어 시작합니다.

다음 줄을 포함하도록 이 파일을 변경합니다.

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build --dist-dir public"
  },
  "author": "",
  "license": "ISC"
  ...

package.json 파일에서 \main\: \index.js\\source\: \src/index.html\ 로 교체했습니다. . \source\는 애플리케이션의 입력 또는 소스 파일과 파일에 대한 특정 경로를 나타냅니다. 다음 두 스크립트도 포함했습니다.

  • start: parcel: start는 이 명령의 이름입니다. 원하는 대로 이름을 지정할 수 있습니다. \parcel\은 스크립트가 수행할 실제 명령입니다. 이 경우 \parcel\은 이전 npx 소포 명령이 수행하는 작업을 정확하게 수행합니다. 진입점 파일로 개발 서버를 시작하고 포함된 자산으로 빌드합니다. \source\ 필드에 진입점의 소스를 지정했기 때문에 Parcel은 이 파일을 찾을 위치를 이해합니다.\n
  • build: parcel build --dist-dir public: build는 위의 ”start”와 같은 이 명령의 이름입니다. . 원하는 이름을 지정할 수 있습니다. ”parcel build” 명령은 생산을 위해 코드를 빌드하고 최적화합니다. 이것은 일반적으로 애플리케이션 개발을 마친 후에 실행됩니다. 출력을 위한 Parcel의 기본 디렉토리 이름은 dist입니다. --dist-dir public 태그는 프로덕션 파일의 출력 폴더를 정의하고 dist 기본 디렉터리와의 혼동을 피하기 위해 이름을 public로 지정합니다. 이후 단계에서 이 작업을 수행합니다.\n

이제 터미널에 npx 소포 src/index.html을 입력하여 개발 서버를 시작하는 대신 npm start를 입력할 수 있습니다.

  1. npm start
Output
❯ npm start > your_project@1.0.0 start > parcel Server running at http://localhost:1234 ✨ Built in 5ms

npm start 명령은 개발 서버를 시작하는 간단한 방법입니다.

웹 브라우저를 열고 http://localhost:1234로 이동합니다. 애플리케이션의 랜딩 페이지는 이전과 동일해야 합니다.

구성 파일이 완료되면 애플리케이션 개발 및 테스트를 계속할 수 있습니다. 애플리케이션을 제작할 준비가 되면 다음 단계를 시작할 수 있습니다.

5단계 - 프로덕션을 위한 애플리케이션 구축

번들러의 주요 기능 중 하나는 파일 유형을 병합하는 것입니다. 이것이 build 명령을 실행할 때 Parcel이 수행하는 작업입니다. 예를 들어 src/css 디렉토리 내에 서로 의존하는 여러 CSS 파일이 있는 경우 Parcel은 npm run build 를 사용할 때 해당 파일을 단일 파일로 결합합니다. 명령. JavaScript 파일도 마찬가지입니다. Parcel이 이 작업을 수행하는 방법에 대한 자세한 내용은 설명서를 참조하십시오.

애플리케이션이 프로덕션 준비가 되면 package.json 파일에 포함된 build 명령을 사용하여 프로덕션 파일을 생성합니다.

먼저 최상위 디렉토리인 your_project에 있는지 확인한 후 터미널이나 명령 프롬프트에 다음 명령을 입력합니다.

  1. npm run build
Output
❯ npm run build > your_project@1.0.0 build > parcel build ✨ Built in 767ms public/index.html 781 B 239ms public/index.9daf4050.css 582 B 21ms public/index.a9c94235.js 532 B 179ms

위에서 언급했듯이 파일에 대한 Parcel의 기본 출력은 dist 폴더에 있습니다. 파일을 public이라는 디렉터리에 출력하도록 빌드 스크립트를 지정했으므로 Parcel은 이 폴더를 생성하고 프로덕션 파일을 여기에 출력합니다. 이 폴더의 파일은 병합, 축소 및 추가 최적화되므로 개발 중일 때와 다릅니다. 프로덕션 파일과 Parcel이 코드를 최적화하기 위해 수행하는 작업에 대한 자세한 내용은 문서에서 확인할 수 있습니다.

예를 들어 public/index.html 파일을 열면 코드가 축소되어야 합니다.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/index.9daf4050.css"><title>Your Parcel Project</title></head><body><h1>Welcome to Parcel!</h1> <div class="sammy-wrapper"><div class="img-wrapper sammy-1"><img src="https://assets.linux-console.net/articles/docker_node_image/sammy.png" alt="Sammy the Shark"></div></div> <button>Change the Background Color</button> <script type="module" src="/index.a9c94235.js"></script></body></html>

dist 폴더와 마찬가지로 public 디렉토리 내에서 작업을 수행하지 않습니다. 코드를 변경해야 하는 경우 src 디렉토리 내의 파일로 직접 변경하십시오.

npm start 명령과 마찬가지로 변경 후 npm run build 명령을 사용하여 프로덕션 파일을 다시 빌드할 수 있습니다. public 폴더와 그 안의 파일은 준비가 되면 웹 서버에 배포됩니다.

이제 Parcel을 사용하여 애플리케이션을 만들고 번들로 묶었습니다.

결론

이 자습서에서는 응용 프로그램을 만들고 Parcel과 번들로 묶었습니다. 또한 두 개의 npm 스크립트를 생성하여 개발 및 프로덕션 파일을 모두 생성했습니다. Parcel에 대해 자세히 알아보려면 공식 문서를 확인하세요.

애플리케이션을 배포하는 방법을 알아보려면 DigitalOcean App Platform 튜토리얼을 사용하여 정적 사이트를 클라우드에 배포하는 방법을 읽어보십시오.