Parcel 打包示例 - React HelloWorld

K_B_Z 發(fā)布于2019-08-29 13:58 / 1036人閱讀

使用 Parcel 打包的 React HelloWorld 應(yīng)用。GitHub 地址: https://github.com/justjavac/...

0. 新建目錄

mkdir react-helloworld
cd react-helloworld

1. 初始化 npm

yarn init -y

或

npm init -y

此時會創(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

此時 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

此時 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)容

7. 新建 index.js 文件

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return Hello World!;
};

ReactDOM.render(, 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

打包過程會生產(chǎn) .cache 和 dist 兩個目錄，如果是 git 工程，可以新建 .gitignore 文件忽略這兩個目錄：

.cache
dist
node_modules

GitHub 地址: https://github.com/justjavac/...

云服務(wù)器 GPU云服務(wù)器 Parcel HelloWorld react _React

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112831.html

發(fā)表評論

登陸后可評論

0條評論

K_B_Z

男|高級講師

我要關(guān)注我要私信

TA的文章

心血來潮，總結(jié)技術(shù)框架

閱讀 2552·2021-10-11 10:58
Parcel 打包示例 - React HelloWorld

閱讀 1037·2019-08-29 13:58
2019前端面試題（持續(xù)更新）

閱讀 1672·2019-08-26 13:32
css頁面布局技巧

閱讀 837·2019-08-26 10:40
一個基于 Vue 的地區(qū)選擇器v-distpicker

閱讀 3264·2019-08-26 10:18
require.js學(xué)習(xí)筆記。

閱讀 1763·2019-08-23 14:18
原生Js-msi系統(tǒng)

閱讀 1112·2019-08-23 10:54
小程序授權(quán)功能（廢）

閱讀 441·2019-08-22 18:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Parcel 打包示例 - React HelloWorld

Hello World!

相關(guān)文章