집 > 기사 > 웹 프론트엔드 > 소포 포장 예시에 대한 자세한 설명

소포 포장 예시에 대한 자세한 설명

小云云원래의: 2018-01-16 13:20:222383검색

이 글은 주로 Parcel 패키징 예시(React HelloWorld)를 소개하며, Parcel 패키징의 특징과 사용 예시를 자세히 소개하고 있으니 관심 있으신 분들에게 도움이 되었으면 좋겠습니다.

Parcel 패키징 기능

매우 빠른 패키징 시간

Parcel은 작업자 프로세스를 사용하여 멀티 코어 컴파일을 가능하게 합니다. 빌드를 다시 시작한 후에도 빠른 재컴파일을 가능하게 하는 파일 시스템 캐시도 있습니다.

모든 리소스를 패키징하세요

Parcel은 JS, CSS, HTML, 파일 등에 대한 기본 지원을 제공하며 플러그인이 필요하지 않습니다.

자동 변환

Babel, PostCSS, PostHTML 및 심지어 node_modules 패키지도 필요한 경우 코드를 자동으로 변환하는 데 사용됩니다.

코드 분할 구성

동적 가져오기() 구문을 사용하여 Parcel은 출력 파일(번들)을 묶습니다. ) 따라서 초기 로드 시 필요한 코드만 로드하면 됩니다.

핫 모듈 교체

Parcel에는 구성이 필요하지 않습니다. 개발 환경에서는 코드가 변경되면 브라우저에서 모듈이 자동으로 업데이트됩니다.

친절한 오류 로그

오류가 발생하면 Parcel은 문제를 찾는 데 도움이 되도록 구문이 강조 표시된 코드 조각을 출력합니다.

Parcel과 함께 패키지로 제공되는 React HelloWorld 애플리케이션. GitHub 주소: https://github.com/justjavac/parcel-example/tree/master/react-helloworld

0. 새 디렉터리를 만듭니다

mkdir react-helloworld
cd react-helloworld

yarn init -y

또는

npm init -y

이 때 package.json 파일이 생성됩니다. 파일 내용은

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

2입니다.

yarn add react react-dom

npm:

npm install react react-dom --save

package.json 파일 내용:

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+  "react": "^16.2.0",
+  "react-dom": "^16.2.0"
+ }
 }

3. Babel

새 .babelrc 파일

touch .babelrc

입력을 추가하세요. 내용:

{
 "presets": ["react"]
}

add babel-preset- React:

yarn:

yarn add babel-preset-react -D

npm:

npm install babel-preset-react --D

이때 package.json 파일 내용:

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
-  }
+  },
+  "devDependencies": {
+   "babel-preset-react": "^6.24.1"
+  }
 }

원사:

yarn add parcel-bundler -D

npm:

npm install parcel-bundler --D

현재 package.json 파일 내용:

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
  },
  "devDependencies": {
-   "babel-preset-react": "^6.24.1"
+   "babel-preset-react": "^6.24.1",
+   "parcel-bundler": "^1.0.3"  
  }
 }

6 새 index.html 파일

Content

rreee

7. 새로운 index.js 파일

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

8. 패키징 명령 추가

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
 return <h1>Hello World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

 {
  "name": "parcel-example-react-helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-  "test": "echo \"Error: no test specified\" && exit 1"
+  "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   "react": "^16.2.0",
   "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1"
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.0.3"  
  }
 }

또는

yarn start

브라우저에서 http를 엽니다. ://localhost:1234

패키징 프로세스에서는 .cache와 dist라는 두 개의 디렉터리가 생성됩니다. Git 프로젝트인 경우 새 .gitignore 파일을 만들고 다음 두 디렉터리를 무시할 수 있습니다.

npm start

GitHub 주소: https://github .com/justjavac/parcel-example/tree/master/react-helloworld

소포 포장 예시에 대한 자세한 설명

관련 기사