亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Parcel 打包示例 - React HelloWorld

K_B_Z / 1112人閱讀

使用 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

此時(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)容
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. 完成

運(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/...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112831.html

相關(guān)文章

  • Parcel 打包示例 - React HelloWorld

    使用 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 此時(shí)會(huì)創(chuàng)建要給 package.json 文件，文件內(nèi)容： ...

    Shihira 評(píng)論0 收藏0

  • 原創(chuàng)全新打包工具Parcel零配置VueJS開發(fā)腳手架

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

    testHs 評(píng)論0 收藏0

  • 從零開始實(shí)現(xiàn)一個(gè)React（一）：JSX和虛擬DOM

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

    曹金海 評(píng)論0 收藏0

  • 一篇文章學(xué)會(huì) TypeScript

    摘要：接下來來看一段代碼示例語法與語言比較當(dāng)類型不對(duì)的時(shí)候，會(huì)提示錯(cuò)誤編譯后語法聯(lián)想大致可以把它看成是加了類型系統(tǒng)的。 一篇文章學(xué)會(huì) TypeScript （內(nèi)部分享標(biāo)題：TypeScript 基礎(chǔ)） 這篇文章是我在公司前端小組內(nèi)部的演講分享稿，目的是教會(huì)大家使用 TypeScript，這篇文章雖然標(biāo)著基礎(chǔ)，但我指的基礎(chǔ)是學(xué)完后就能夠勝任 TypeScript 的開發(fā)工作。從我分享完的效果來...

    itvincent 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

K_B_Z

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<