블록 설정 React 항목 사용 방법

2022-06-01 last update

소개

ParcelJS 자신을 속도가 매우 빠르고 제로 설정된 웹 응용 프로그램 패키지로 설명합니다.
Parcel의 전제 조건은 JavaScript 번들로 응용 프로그램을 구축하는 것이 더 쉬울 수 있다는 것이다.웹 팩은 더 좋은 설정성을 제공하지만, 어떤 용례에서는 이 정도의 설정이 필요하지 않을 수도 있습니다.
여기가 소포가 들어오는 곳입니다.이것은 제로 설정의 빠른 묶음 도구라고 자랑한다. 프로그램의 입구점을 가리키기만 하면 된다.
Parcel은 다음과 같은 기능도 제공합니다.

빠른 번들 시간 - 다른 번들 도구에 비해 Parcel의 시간이 훨씬 빠릅니다.다음은 the Parcel page on GitHub 화면 캡처입니다.

자산 번들 - Parcel은 JS, CSS, HTML 및 파일 자산에 대해 기존 지원을 제공합니다.

자동 변환 - Babel, PostSS 및 PostHTML을 사용하여 모든 코드를 자동으로 변환합니다.

코드 분할-Parcel에서dynamic import () 문법으로 출력 패키지를 분할할 수 있습니다.

핫 모듈 교체(HMR) - 개발 과정에서 변경할 때 Parcel은 구성 없이 브라우저에서 모듈을 자동으로 업데이트합니다.

오류 로그 기록 - Parcel은 오류가 발생했을 때 문법이 강조 표시된 코드 프레임을 인쇄하여 문제를 해결하는 데 도움을 줍니다.

Parcel에 관해서는 개발자가 JS 모듈이 아니라 index.html 파일을 입구점으로 사용할 수 있도록 하는 것도 주의해야 한다.
이 강좌에서는 Parcel을 사용하여 React 웹 앱을 설정합니다.

선결 조건

이 강좌를 완성하려면 다음이 필요합니다.

노드.js를 로컬에 설치하면 다음과 같은 방식으로 조작할 수 있습니다 How to Install Node.js and Create a Local Development Environment.

이 강좌는 노드 v14.4.0, npm v6.14.5, parcel-bundler v1.12.4, react v16.13.1, react-dom v16.13.1을 통해 검증되었다.

단계 1 - 패키지 시작

먼저 새 작업 디렉토리를 만듭니다.

mkdir parcel-test

그런 다음 새 작업 디렉토리로 이동합니다.

cd parcel-test

터미널에서 다음 명령을 실행하여 패키지를 전역으로 설치합니다.

npm install -g parcel-bundler

다음은 디렉터리에 package.json 파일을 만드는 것입니다.다음 명령을 실행하여 이 작업을 수행할 수 있습니다.

npm init -y

작업 생성package.json:
소포json

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

Parcel은 모든 유형의 파일을 입구점으로 사용할 수 있지만 HTML이나 JavaScript 파일은 좋은 시작점입니다.상대 경로를 사용하여 HTML에 주 JavaScript 파일을 링크하면 Parcel에서도 처리합니다.
생성index.html 및 다음을 추가합니다.
지수html

<html>
<body>
  <script src="./index.js"></script>
</body>
</html>

그러면 JavaScript 파일을 참조하는 기본 웹 페이지가 만들어집니다.
다음으로 index.js 파일을 만들고 다음 내용을 추가합니다.
지수회사 명

console.log("hello world");

이 스크립트는 "hello world" 메시지를 컨트롤러로 출력하는 스크립트를 만들 것입니다.
파일 생성이 완료되면 응용 프로그램을 실행할 수 있습니다.Parcel은 내장된 개발 서버와 함께 파일을 변경할 때 응용 프로그램을 자동으로 재구성하고 빠른 개발을 위해 열 모듈 교체를 지원합니다.
응용 프로그램을 실행하려면 다음 터미널 명령을 실행하십시오.

parcel index.html

이제 브라우저에서 열 수 있습니다 http://localhost:1234/:

콘솔의 예상 출력을 확인하십시오.

2단계 - Parcel 및 React를 사용하여 항목 설정

이제 블록을 사용하여 React 항목을 설정합니다.
계속하기 전에 몇 가지 의존 항목을 설치해야 합니다.

npm install react react-dom

상기 의존 항목은 응용 프로그램에 React 및react-dom을 설치합니다.React는 ES6로 작성되었으므로 코드를 변환하는 방법이 필요합니다.Parcel은 구성할 필요 없이 이러한 작업을 수행합니다.네가 해야 할 일은 미리 설치하는 것이다. 소포는 너를 도와 무거운 일을 완성할 것이다.

npm install --save-dev babel-preset-env babel-preset-react

종속 항목을 설치한 후 .babelrc 파일을 만들고 다음 내용을 사용하여 편집합니다.
.바베타 LRC

{
  "presets": ["env", "react"]
}

이제 Babel은 ES6/ES7 JavaScript를 의미 있는 브라우저 JavaScript 패키지로 변환하도록 구성되었습니다.
다음으로 React 응용 프로그램과 구성 요소를 만들 수 있습니다.index.html 파일을 열고 다음 코드로 대체합니다.
지수html

<!DOCTYPE html>
<html>
<head>
  <title>React starter app</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="./src/index.js"></script>
</body>
</html>

이 코드는 a<title>와 a<div id="app">를 추가했습니다.그것 또한 Bulma CSS framwork의 기본 조형을 증가시켰다.다음 단계에서 작성할 새 파일 index.js 을 참조합니다.
다음으로 src 라는 디렉토리를 만듭니다.

mkdir src

그리고 이 디렉터리에 index.js 파일을 만들고 다음 코드 줄을 추가합니다.
src/인덱스.회사 명

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <div className="container">
          <h1>Hello {this.props.name}</h1>
        </div>
      </div>
    );
  }
}

let App = document.getElementById('app');

ReactDOM.render(<HelloMessage name="Yomi" />, App);

이것은 기본적인 React 시작 응용 프로그램입니다.HelloMessage 구성 요소는 index.html 의 div 파일에서 렌더링됩니다. 여기서 id 은 app 입니다.
다음은 Header 구성 요소를 만듭니다.
작업 디렉토리로 돌아가 components 디렉토리를 만듭니다.

mkdir -p src/components

이 디렉토리에 Header.js 라는 JavaScript 파일을 만들고 다음 코드 행을 추가합니다.
src/구성 요소/제목.회사 명

import React from 'react';
import ParcelLogo from '../img/parcel-logo.svg';

const Header = () => (
  <header>
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <a className="navbar-item" href="/">
          <img width="120" src={ParcelLogo} alt="" />
        </a>
      </div>
    </nav>
  </header>
);

export default Header;

다음으로 ParcelLogo를 만듭니다.
작업 디렉토리로 돌아가 img 디렉토리를 만듭니다.

mkdir -p src/img

이 디렉토리에 parcel-logo.svg 라는 SVG 파일을 만들고 다음 코드 행을 추가합니다.
src/img/지면 표지.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1068.58691 218.40186" fill="#E7DACB"><title>Asset 1</title><path d="M134.10156,41.99756c25.2002,0,42.6001,17.40039,42.6001,42.60059v54.60059c0,25.2002-17.3999,42.60059-42.6001,42.60059H66.90088v76.20117H23.7002V41.99756Zm24,46.80078c0-18.6001-10.80029-29.40039-29.40039-29.40039H42.30029V240.6001h6V164.39893h80.40088c18.6001,0,29.40039-10.7998,29.40039-29.40039ZM128.70117,65.39795c15.00049,0,23.40039,8.40039,23.40039,23.40039v46.2002c0,15.00049-8.3999,23.40039-23.40039,23.40039H48.30029v-93.001Zm-5.3999,75.60107c6.6001,0,10.2002-3.6001,10.2002-10.2002V92.99854c0-6.6001-3.6001-10.2002-10.2002-10.2002H66.90088V140.999Z" transform="translate(-23.7002 -40.79785)"/><path d="M223.79834,258.00049H179.09766L248.69873,41.99756h50.40039L368.7002,258.00049h-46.501l-14.09961-48.60156H238.19873ZM343.19922,240.6001l-55.5-181.20215H260.09863L203.69824,240.6001h5.7002l15-48.60059H322.7998L337.499,240.6001ZM263.69873,65.39795,226.19824,185.99951H320.999L284.09912,65.39795Zm9.8999,24.00049,22.80029,79.20068h-46.2002Z" transform="translate(-23.7002 -40.79785)"/><path d="M509.99512,258.00049l-34.7998-80.10107H440.39453v80.10107h-43.2002V41.99756H507.2959c25.2002,0,42.59961,17.40039,42.59961,42.60059v50.70068c0,20.3999-11.39941,35.7002-29.39941,40.80029l36,81.90137Zm18.90039-17.40039-34.7998-79.80127h7.7998c18.60059,0,29.40039-10.7998,29.40039-29.3999V88.79834c0-18.6001-10.7998-29.40039-29.40039-29.40039H415.79492V240.6001h6V160.79883h66L522.5957,240.6001ZM525.2959,131.39893c0,15-8.40039,23.3999-23.40039,23.3999H421.79492V65.39795h80.10059c15,0,23.40039,8.40039,23.40039,23.40039Zm-28.80078,6.2998c6.60059,0,10.2002-3.6001,10.2002-10.2002v-34.5c0-6.6001-3.59961-10.2002-10.2002-10.2002H440.39453v54.90039Z" transform="translate(-23.7002 -40.79785)"/><path d="M697.49316,91.79834c0-6.6001-3.59961-10.2002-10.2002-10.2002h-46.7998c-6.60059,0-10.2002,3.6001-10.2002,10.2002V208.19971c0,6.59961,3.59961,10.19922,10.2002,10.19922H687.293c6.60059,0,10.2002-3.59961,10.2002-10.19922V181.79932h43.20117V216.6001c0,25.19922-17.40039,42.59961-42.60059,42.59961H629.69238c-25.2002,0-42.59961-17.40039-42.59961-42.59961V83.39844c0-25.20068,17.39941-42.60059,42.59961-42.60059h68.40137c25.2002,0,42.60059,17.3999,42.60059,42.60059v34.80029H697.49316Zm-4.7998-27.6001c15,0,23.40039,8.3999,23.40039,23.3999v13.80029h6V87.59814c0-18.6001-10.7998-29.40039-29.40039-29.40039H635.09277c-18.59961,0-29.40039,10.80029-29.40039,29.40039V212.39893c0,18.60059,10.80078,29.40039,29.40039,29.40039h57.60059c18.60059,0,29.40039-10.7998,29.40039-29.40039V199.19971h-6v13.19922c0,15.001-8.40039,23.40039-23.40039,23.40039H635.09277c-15,0-23.40039-8.39941-23.40039-23.40039V87.59814c0-15,8.40039-23.3999,23.40039-23.3999Z" transform="translate(-23.7002 -40.79785)"/><path d="M920.38965,41.99756V82.79834H822.28809v44.40039h79.501V167.999h-79.501v49.20068h98.10156v40.80078H779.08789V41.99756ZM901.78906,240.6001v-6H803.68848v-84.001h79.501v-6.00049h-79.501V65.39795h98.10059v-6H797.68848V240.6001Z" transform="translate(-23.7002 -40.79785)"/><path d="M1001.68555,41.99756V217.19971h90.60156v40.80078H958.48535V41.99756Zm72.001,198.60254v-6H983.08594V59.39795h-6V240.6001Z" transform="translate(-23.7002 -40.79785)"/></svg>

Parcel은 이미지 등의 자산 가져오기도 지원합니다.
또 하나 주의해야 할 것은 이 가방에는 Sass 지원도 포함되어 있다는 것이다.작업 디렉토리로 돌아가서 설치node-sass합니다.

npm install node-sass

설치node-sass 후에는 JavaScript 파일에서 SCSS 파일을 가져올 수 있습니다.index.js 파일에서 다음 코드 행을 파일 상단에 추가하여 SCSS 파일을 가져옵니다.
src/인덱스.회사 명

import './scss/app.scss'
...

다음은 app.scss 파일을 만듭니다.
작업 디렉토리로 돌아가서 scss 라는 디렉토리를 만듭니다.

mkdir -p src/scss

그리고 이 디렉터리에 app.scss 파일을 만들고 다음 코드 줄을 추가합니다.
src/scss/app.scss 회사

body {
  background-color: #fefefe;
  text-align: center;

  .navbar {
    background: #21374B;
    color: #E7DACB;
    height: 50px;
  }

  h1 {
    font-size: 40px;
    margin-top: 30px;
  }
}

이 코드는 <body> 과 <nav class="navbar"> 의 색을 만들었고, <h1> 의 조판을 만들었다.
현재, React 프로그램의 설정을 마쳤습니다. 다음 단계는 실행 중입니다. 실행 중입니다. 실행 중입니다.이를 구현하려면 구성package.json이 필요합니다.package.json 파일에 다음 코드 행을 추가합니다.
소포json

"scripts": {
  "start": "parcel index.html"
},

명령npm start과 함께 실행되는 스크립트를 만듭니다.이 스크립트는 Parcel에서 파일 index.html 을 엔트리 파일로 사용하여 개발 서버를 시작하도록 알려줍니다.
터미널에서 실행npm start 명령:

npm start

이제 브라우저에서 열 수 있습니다 http://localhost:1234/:

핫 모듈 다시 로드를 실행하는 React 응용 프로그램이 있습니다.

3단계 - 생산 건물

Parcel을 사용하여 프로덕션 준비 응용 프로그램을 실행하려면 parcel build index.html 명령을 실행해야 합니다.scripts 파일에 추가된 package.json 객체:
소포json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html"
},

npm run build 명령을 실행하면 Parcel은 모니터링 모드와 열 모듈 교체를 비활성화하므로 한 번만 생성됩니다.

npm run build

또한 모든 출력 패키지의 크기를 줄여 파일 크기를 줄일 수 있습니다.build 명령은 생산 모드를 사용하고, 이 모드는 환경 변수를 설정합니다.
Parcel은 응용 프로그램이 생산 모델을 어떻게 준비할 것인지를 선택할 수 있는 옵션도 제공합니다.
블록에 대해 다른 디렉토리를 선택하여 프로덕션 파일을 배치하려는 경우 NODE_ENV=production 키의 끝에 dist 를 추가하여 지정할 수 있습니다.
소포json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --out-dir directory-name"
},

축소 (기본값) 를 사용하지 않으려면 --out-dir directory-name 키 build 의 끝에 추가 package.json 를 사용하여 다음과 같이 할 수 있습니다.
소포json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --no-minify"
},

파일 시스템 캐시를 해제하려면 --no-minify 의 build 키 끝에 package.json 를 추가하여 다음과 같이 할 수 있습니다.
소포json

"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --no-cache"
},

더 많은 정보the different options in the official documentation를 읽을 수 있습니다.

결론

이 강좌에서는 웹 응용 프로그램과 Parcel을 한데 묶습니다.Parcel은 여전히 상대적으로 새롭고, 그 지원량은 매일 끊임없이 증가하고 있다.그것의 용례는 웹 팩과 다를 수 있지만, 이것은 일상적인 웹 개발에서 고려할 수 있는 묶음 도구입니다.
문제를 보고 요청을 제출하려면 Parcel repo 을 참조하십시오.
codebase for this tutorial can be found on GitHub.

첫 번째 Visual Studio 코드 확장을 만드는 방법

Ubuntu 18.04에 NFS 서버 설치 및 구성 방법