손쉬운 애플리케이션 번들링: 2분 이내에 React + Parcel

4754 단어 reactwebdevjavascript

손쉽게 웹 애플리케이션 번들



번들러는 다양한 소스 파일(JavaScript, CSS, Sass 등)을 가져오는 데 사용됩니다. 브라우저에서 사용할 수 있도록 준비합니다. 이 기사에서는 JavaScript 애플리케이션용 번들러를 이미 사용하고 있다고 가정합니다. 번들러 및 작동 방식에 대한 자세한 내용은 check out this post by Alberto Gimeno
을 참조하십시오.

webpack , rollup 등과 같은 응용 프로그램을 번들로 묶는 데 사용할 수 있는 훌륭한 도구가 많이 있습니다. 그러나 오늘은 소포에 집중하고 싶습니다.

시작하기



Parcel에는 오버헤드가 거의 없지만 두 가지 단계를 수행해야 합니다( as noted in the Parcel documentation ).

먼저 소포를 글로벌 종속성으로 설치해야 합니다. npm install -g parcel-bundler 또는 yarn global add parcel-bundler
여기에서 프로젝트 폴더를 만들고 프로젝트를 초기화해야 합니다(package.json 파일 사용): npm init -y 또는 yarn init -y (초기화 마법사를 진행하려면 -y 플래그를 제거하십시오).

약간의 코드



이 시점에서 코드 작성을 시작하는 것이 좋을 것입니다. "Hello world"유형의 React 구성 요소를 작성하는 것으로 시작하겠습니다. 영상에서는 이것을 SayHello.js라고 불러 프로젝트 폴더의 루트에 생성했습니다. 덜 고안된 프로젝트에서는 조금 더 많은 구성을 원할 수 있습니다(예: /src/ 아래에 JavaScript 파일을 배치할 수 있음).
SayHello.js
import React from "react";

export default function SayHello({ name }) {
  return <h1>Hello {name}!</h1>;
}

다음으로 index.js 파일을 만듭니다. 이 파일을 React 구성 요소와 DOM 요소를 연결할 위치로 취급합니다. 우리는 아직 HTML 파일을 만들지 않았지만 결국 "main"이라는 id를 가진 요소를 갖게 될 것이고 우리의 구성 요소를 이 요소로 렌더링하고 싶다고 가정해 봅시다.
index.js
import React from "react";
import ReactDOM from "react-dom";
import SayHello from "./SayHello";

ReactDOM.render(
  <SayHello name="everyone" />, 
  document.getElementById("main")
);

마지막으로 애플리케이션의 진입점 역할을 할 HTML 파일을 생성합니다. 참고: 이 예제에서는 인위적인 마크업을 사용하고 있습니다. 이상적으로는 HTML 파일에 더 많은 내용(doctype, 제목 등)이 있지만 명확성을 위해 가볍게 유지하겠습니다.
index.html
<html>
  <body>
    <div id="main"></div>
    <script src="./index.js"></script>
  </body>
</html>

애플리케이션 실행



이제 명령줄로 돌아가서 프로젝트 디렉터리에서 parcel index.html를 입력하면 프로젝트가 현재 실행 중임을 나타내는 다음과 같은 표시가 나타납니다.

➜  testParcel parcel index.html 
Server running at http://localhost:1234 
⠼ Packaging
✨  Built in 1.52s.

브라우저에서 localhost:1234로 이동하면 실행 중인 애플리케이션이 표시됩니다.



제발 check out the Parcel documentation for more information .
resin 최적화
웹 Mac에서 시력을 회복할 수 있는 어플리케이션이 있는지 확인한 결과는?@yumainaura

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage