首頁 > 開發者 > JavaScript
Parcel 打包樣本(React HelloWorld)，parcelhelloworld
Parcel 打包特點
極速打包時間
Parcel 使用 worker 進程去啟用多核編譯。同時有檔案系統快取，即使在重啟構建後也能快速再編譯。
將你所有的資源打包
Parcel 具備開箱即用的對 JS, CSS, HTML, 檔案 及更多的支援，而且不需要外掛程式。
自動轉換
如若有需要，Babel, PostCSS, 和PostHTML甚至 node_modules 包會被用於自動轉碼.
配置代碼分拆
使用動態 import() 文法, Parcel 將你的輸出檔案束(bundles)分拆，因此你只需要在初次載入時載入你所需要的代碼。
熱模組替換
Parcel 無需配置，在開發環境的時候會自動在瀏覽器內隨著你的代碼更改而去更新模組。
友好的錯誤記錄檔
當遇到錯誤時，Parcel 會輸出 文法高亮的程式碼片段，協助你定位問題。
使用 Parcel 打包的 React HelloWorld 應用。GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld
0. 建立目錄
mkdir react-helloworldcd react-helloworld
1. 初始化 npm
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. 添加 React
yarn：
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"]}
添加 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"+ } }
5. 添加 Parcel
yarn：
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 檔案
內容
<html><body> <div id="root"></div> <script src="./index.js"></script></body></html>
7. 建立 index.js 檔案
import React from "react";import ReactDOM from "react-dom";const App = () => { return <h1>Hello World!</h1>;};ReactDOM.render(<App />, document.getElementById("root"));
8. 添加打包命令
{ "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" } }
9. 完成
運行
yarn start
或
npm start
在瀏覽器中開啟 http://localhost:1234
打包過程會生產 .cache 和 dist 兩個目錄，如果是 git 工程，可以建立 .gitignore 檔案忽略這兩個目錄：
.cachedistnode_modules
GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
