Parcel 사용 RECT 응용 프로그램을위한 번들로 사용합니다

웹 팩이 자산 관리를위한 유일한 게임은 아닙니다. Parcel은 설득력있는 대안을 제공하여 구성 제로 구성으로 간소화 된 자산 번들링을 제공합니다. 광범위한 설정 코드를 요구하는 다른 번들과 달리 Parcel의 단순성은 주요 이점입니다. 그 속도는 또한 더욱 복잡한 번들에 비해 건물 시간을 상당히 빠른 건물 시간 동안 멀티 코어 처리를 활용하여 주목할만한 것입니다.

소포의 주요 기능과 이점은 다음과 같습니다.

• 동적 가져 오기를 통한 효율적인 코드 분할.
• HTML, CSS 및 JavaScript를 포함한 다양한 파일 유형에 대한 다목적 자산 처리.
• 일정한 페이지 새로 고침이없는 빠른 개발을위한 핫 모듈 교체 (HMR).
• 쉽게 디버깅을 위해 콘솔에서 클리어 오류가 발생합니다.
• 개발 및 생산 설정을 관리하기위한 환경 변수 지원.
• 불필요한 단계를 제거하여 더 빠른 빌드를위한 최적화 된 생산 모드.

이 기사에서는 Parcel을 사용하여 React 프로젝트를 구축하는 방법을 보여 주며 React 앱을 만들기위한 대안을 보여줍니다. 발전에 반응하기위한 다른 접근법을 탐색합시다.

프로젝트 설정

1. 프로젝트 디렉토리 만들기 :

 mkdir csstricks-react-parcel && cd $ _

2. package.json 초기화 : NPM 또는 원사 사용 :

 # npm
npm init -y

# 원사 (이 튜토리얼에서 사용)
원사 init -y

3. 종속성 설치 : 소포 및 바벨을 로컬로 설치하십시오.

 원사는 소포 펀들 바벨-프레스-엔브 바벨-프리 세트-리프트-데브를 추가합니다
원사 첨가 React React-Dom

4. babel 구성 : 다음 내용으로 .babelrc 파일을 만듭니다.

 {
  "사전 설정": [ "Env", "React"]
}

5. index.js 만들기 (앱 구성 요소) :

 'React'에서 React React;
'React-Dom'에서 Reactdom 가져 오기;

클래스 앱이 연장 rect.component {
  렌더 () {
    반품 (
      <react.fragment><h2 id="안녕하세요">안녕하세요!</h2></react.fragment>
    );
  }
}

const rootElement = document.getElementById ( "root");
REACTDOM.RENDER (<app></app> , rootlement);

6. index.html 만들기 ( src 디렉토리) :

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>소포 반응 예</title>


  <div id="root"></div>

7. configure package.json (시작 스크립트) :

 "스크립트": {
  "시작": "node_env = 개발 소포 src/index.html -Open"
}

8. 응용 프로그램 실행 : 터미널에서 yarn start 실행하십시오. 앱은 브라우저에서 http://localhost:1234/ 에서 시작해야합니다.

Sass와의 스타일링

소포에는 Postcs가 포함됩니다. SASS를 사용하려면 필요한 패키지를 설치하십시오.

 원사 ADD-DEV NODE-SASS AUTOPREFIXER

package.json 의 postcss 섹션을 구성하십시오 (필요한 경우) :

 "postcss": {
  "모듈": 거짓,
  "플러그인": {
    "AutoPrefixer": {
      "브라우저": [ "> 1%", "마지막 4 버전", "Firefox ESR", "IE <h3 id="생산-빌드"> 생산 빌드</h3><p> 프로덕션 빌드를 위해 <code>package.json</code> 구성하십시오.</p><pre class="brush:php;toolbar:false"> "스크립트": {
  "시작": "node_env = 개발 소포 src/index.html -open",
  "빌드": "node_env = 프로덕션 소포 빌드 dist/ index.html--public-url ./"
}

yarn build 실행하여 dist 폴더에서 프로덕션 준비 빌드를 만듭니다. --out-dir , --no-minify 및 --no-cache 와 같은 옵션은 추가 사용자 정의를 제공합니다.

쓰레기 (React App Parcel 만들기)

CRAP (React App Parcel) 작성 프로젝트 설정을 단순화합니다.

 npx create-react-app-parcel my-app
CD My-App
원사 시작

결론

Parcel의 사용 편의성과 최적화 된 빌드 시간은 다음 React 프로젝트의 강력한 경쟁자가됩니다. 증가하는 인기 (30,000 Github 스타)는 커뮤니티 수용에 대해 이야기합니다.

자원

• 소포 예
• 멋진 소포

이 튜토리얼의 소스 코드의 GitHub 저장소 (제공 될 링크).

위 내용은 Parcel 사용 RECT 응용 프로그램을위한 번들로 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!