Parcel을 이용하여 포장하는 방법
- 亚连원래의
- 2018-06-11 17:26:441917검색
이 글에서는 주로 소포 포장 예시(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-domadd babel-preset-react:yarn:
npm install react react-dom --savenpm:
{
"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
8.
npm install parcel-bundler --D9 패키징 명령을 추가합니다. 를 완료한 후
{
"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 중국어 웹사이트의 기타 관련 기사를 참조하세요!