Parcel 打包示例 - React HelloWorld

Shihira 發布于2019-08-21 17:57 / 1221人閱讀

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

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 文件

內容

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

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

.cache
dist
node_modules

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

GPU云服務器云服務器 Parcel HelloWorld react _React

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90269.html

Parcel 打包示例 - React HelloWorld

使用 Parcel 打包的 React HelloWorld 應用。GitHub 地址: https://github.com/justjavac/... 0. 新建目錄 mkdir react-helloworld cd react-helloworld 1. 初始化 npm yarn init -y 或 npm init -y 此時會創建要給 package.json 文件，文件內容： ...

K_B_Z 2019-08-29 13:58 評論0 收藏0
原創全新打包工具Parcel零配置VueJS開發腳手架

摘要：一個基于打包工具的急速開發腳手架解決方案強烈建議使用以上項目地址初始化項目安裝依賴其中是主要的工具，對于結尾的單文件，需要單獨處理文件類型，這個插件會通過來生成對應的代碼，會自動加載開頭的依賴。 parcel-vue 一個基于Parcel打包工具的 VueJS急速開發腳手架解決方案,強烈建議使用node8.0以上項目地址: https://github.com/w3c-king/p....

testHs 2019-08-21 18:45 評論0 收藏0
從零開始實現一個React（一）：JSX和虛擬DOM

摘要：前言是前端最受歡迎的框架之一，解讀其源碼的文章非常多，但是我想從另一個角度去解讀從零開始實現一個，從層面實現的大部分功能，在這個過程中去探索為什么有虛擬為什么這樣設計等問題。前言 React是前端最受歡迎的框架之一，解讀其源碼的文章非常多，但是我想從另一個角度去解讀React：從零開始實現一個React，從API層面實現React的大部分功能，在這個過程中去探索為什么有虛擬DOM、d...

曹金海 2019-08-22 15:32 評論0 收藏0
一篇文章學會 TypeScript

摘要：接下來來看一段代碼示例語法與語言比較當類型不對的時候，會提示錯誤編譯后語法聯想大致可以把它看成是加了類型系統的。一篇文章學會 TypeScript （內部分享標題：TypeScript 基礎）這篇文章是我在公司前端小組內部的演講分享稿，目的是教會大家使用 TypeScript，這篇文章雖然標著基礎，但我指的基礎是學完后就能夠勝任 TypeScript 的開發工作。從我分享完的效果來...

itvincent 2019-08-23 17:54 評論0 收藏0