欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Parcel 打包示例(React HelloWorld)

 更新時(shí)間:2018年01月16日 09:15:14   作者:justjavac  
本篇文章主要介紹了Parcel 打包示例(React HelloWorld),詳細(xì)的介紹了Parcel打包的特點(diǎn)和使用示例,有興趣的可以了解一下

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的解決方案

    這篇文章主要介紹了詳解antd+react項(xiàng)目遷移vite的解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • react中如何使用局部樣式

    react中如何使用局部樣式

    這篇文章主要介紹了react中如何使用局部樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React.js綁定this的5種方法(小結(jié))

    React.js綁定this的5種方法(小結(jié))

    this在javascript中已經(jīng)相當(dāng)靈活,這篇文章主要介紹了React.js綁定this的5種方法(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • React實(shí)現(xiàn)前端選區(qū)的示例代碼

    React實(shí)現(xiàn)前端選區(qū)的示例代碼

    本文主要介紹了React實(shí)現(xiàn)前端選區(qū)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • React Native 中添加自定義字體的方法

    React Native 中添加自定義字體的方法

    這篇文章主要介紹了如何在 React Native 中添加自定義字體,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • 使用react-color實(shí)現(xiàn)前端取色器的方法

    使用react-color實(shí)現(xiàn)前端取色器的方法

    本文通過代碼給大家介紹了使用react-color實(shí)現(xiàn)前端取色器的方法,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2021-11-11
  • react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案

    react 跳轉(zhuǎn)后路由變了頁面沒刷新的解決方案

    最近在學(xué)習(xí)React的過程中遇到了路由跳轉(zhuǎn)后頁面不刷新的問題,本文就詳細(xì)的介紹一下解決方法,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-06-06
  • 一起來了解React的Hook

    一起來了解React的Hook

    這篇文章主要為大家詳細(xì)介紹了React的Hook,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • react中用less的問題

    react中用less的問題

    本文主要介紹了react中用less的問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-04-04
  • React列表欄及購物車組件使用詳解

    React列表欄及購物車組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了React列表欄及購物車組件使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-06-06

最新評(píng)論