Parcel을 이용하여 포장하는 방법-JS 튜토리얼-php.cn

Parcel을 이용하여 포장하는 방법

亚连

풀어 주다： 2018-06-11 17:26:44

원래의

1968명이 탐색했습니다.

이 글에서는 주로 소포 포장 예시(React HelloWorld)를 소개하며, 소포 포장의 특징과 사용 예시를 자세히 소개합니다. 관심 있는 분들은

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

로그인 후 복사

1. npm

yarn init -y

로그인 후 복사

또는

npm init -y

로그인 후 복사

을 초기화합니다. 이때 package.json 파일이 생성됩니다.

새로운 .babelrc 파일을 생성합니다

{
 "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"
}

로그인 후 복사

입력 내용:

yarn add react react-dom

로그인 후 복사

add babel-preset-react:

yarn:

npm install react react-dom --save

로그인 후 복사

npm:

 {
  "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"
+ }
 }

로그인 후 복사

이때 package.json 파일 내용:

touch .babelrc

로그인 후 복사

5. Parcel 추가

yarn:

{
 "presets": ["react"]
}

로그인 후 복사

npm:

yarn add babel-preset-react -D

로그인 후 복사

이때 package.json 파일 내용은

npm install babel-preset-react --D

로그인 후 복사

6 새 index.html 파일을 생성합니다

content

 {
  "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"
+  }
 }

로그인 후 복사

7. 새 index.js 파일을 생성합니다

yarn add parcel-bundler -D

로그인 후 복사

npm install parcel-bundler --D

로그인 후 복사

9 패키징 명령을 추가합니다.

를 완료한 후

 {
  "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"  
  }
 }

로그인 후 복사

또는

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

로그인 후 복사

를 실행하여 http://localhost:1234를 엽니다. browser

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

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

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

로그인 후 복사

위는 제가 모두를 위해 컴파일한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

cropper에서 js의 vue 이미지 자르기 및 업로드 기능을 구현하는 방법

Vuex에서 돌연변이와 액션의 차이점은 무엇인가요? (자세한 튜토리얼)

vue에서 사진 자르기 및 서버에 업로드 기능을 구현하는 방법

easyui 날짜 및 시간 상자, 즉 호환성의 실제 문제를 해결하는 방법(자세한 튜토리얼)

설명 변경 불가능하고 세부적으로 반응합니다. 실용적인 기술

Node.js에서 readline을 사용하여 파일 내용을 한 줄씩 읽고 쓰는 방법

위 내용은 Parcel을 이용하여 포장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!