Parcel 打包示例(React HelloWorld)
Parcel 打包特點(diǎn)
極速打包時(shí)間
Parcel 使用 worker 進(jìn)程去啟用多核編譯。同時(shí)有文件系統(tǒng)緩存,即使在重啟構(gòu)建后也能快速再編譯。
將你所有的資源打包
Parcel 具備開箱即用的對(duì) JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。
自動(dòng)轉(zhuǎn)換
如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包會(huì)被用于自動(dòng)轉(zhuǎn)換代碼.
配置代碼分拆
使用動(dòng)態(tài) import() 語法, Parcel 將你的輸出文件束(bundles)分拆,因此你只需要在初次加載時(shí)加載你所需要的代碼。
熱模塊替換
Parcel 無需配置,在開發(fā)環(huán)境的時(shí)候會(huì)自動(dòng)在瀏覽器內(nèi)隨著你的代碼更改而去更新模塊。
友好的錯(cuò)誤日志
當(dāng)遇到錯(cuò)誤時(shí),Parcel 會(huì)輸出 語法高亮的代碼片段,幫助你定位問題。
使用 Parcel 打包的 React HelloWorld 應(yīng)用。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
此時(shí)會(huì)創(chuàng)建要給 package.json 文件,文件內(nèi)容:
{ "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 文件內(nèi)容:
{ "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
輸入內(nèi)容:
{ "presets": ["react"] }
添加 babel-preset-react:
yarn:
yarn add babel-preset-react -D
npm:
npm install babel-preset-react --D
此時(shí) package.json 文件內(nèi)容:
{ "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
此時(shí) package.json 文件內(nèi)容:
{ "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 文件
內(nèi)容
<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. 完成
運(yùn)行
yarn start
或
npm start
在瀏覽器中打開 http://localhost:1234
打包過程會(huì)生產(chǎn) .cache 和 dist 兩個(gè)目錄,如果是 git 工程,可以新建 .gitignore 文件忽略這兩個(gè)目錄:
.cache dist node_modules
GitHub 地址: https://github.com/justjavac/parcel-example/tree/master/react-helloworld
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解antd+react項(xiàng)目遷移vite的解決方案
這篇文章主要介紹了詳解antd+react項(xiàng)目遷移vite的解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04React實(shí)現(xiàn)前端選區(qū)的示例代碼
本文主要介紹了React實(shí)現(xiàn)前端選區(qū)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05使用react-color實(shí)現(xiàn)前端取色器的方法
本文通過代碼給大家介紹了使用react-color實(shí)現(xiàn)前端取色器的方法,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-11-11react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案
最近在學(xué)習(xí)React的過程中遇到了路由跳轉(zhuǎn)后頁面不刷新的問題,本文就詳細(xì)的介紹一下解決方法,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06