溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“Parcel打包的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Parcel打包的示例分析”這篇文章吧。
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-helloworld cd 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 <h2>Hello World!</h2>;
};
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 文件忽略這兩個目錄：
.cache dist node_modules
以上是“Parcel打包的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
