偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

正式發(fā)布一款可cmd命令安裝的React.js項目腳手架—FastReactApp

開發(fā) 項目管理
主要介紹最近這段時間開發(fā)的一款腳手架——FastReactApp。這是一款基于Parcel2 開發(fā)的React.js項目腳手架。雖然比不上正在前端界火爆的Vite以及占據(jù)穩(wěn)定地位的CreateReactApp,但是基本的項目開發(fā)還是可以的。

前言

今天,篇幅可能比較短,主要介紹最近這段時間開發(fā)的一款腳手架——FastReactApp。這是一款基于Parcel2 開發(fā)的React.js項目腳手架。雖然比不上正在前端界火爆的Vite以及占據(jù)穩(wěn)定地位的CreateReactApp,但是基本的項目開發(fā)還是可以的。

下面我將介紹FastReactApp幾點特征:

  • 對JS、CSS、HTML、文件資產(chǎn)等的現(xiàn)成支持—不需要插件。
  • 使用dynamic import()語法,它分割輸出包,以便您只在初始加載時加載所需的內(nèi)容。
  • 當(dāng)您在開發(fā)過程中進(jìn)行更改時,它會自動更新瀏覽器中的模塊,無需配置。
  • 它使用工作進(jìn)程來支持多核編譯,并且有一個文件系統(tǒng)緩存,即使在重新啟動后也可以快速重建。
  • 現(xiàn)在生成樹震動包的源映射,并在引用未知符號時顯示友好的錯誤消息。
  • 它對React Fast Refresh有一流的支持。它(在大多數(shù)情況下)能夠在重新加載之間保持狀態(tài)(即使在發(fā)生錯誤之后)。

我們定義FastReactApp這個名字,你會看到Fast這個單詞,中文意思是“快”,那到底有多快呢?我們來檢驗一下。

我們先來看下初始化時安裝依賴需要多長時間。

僅僅使用了4.80s。

那么,我們接下來看下熱重載的時間。

也僅僅使用了499ms,是不是覺得特別快。

這全僅僅是Parcel2 的功勞,它使用工作進(jìn)程來支持多核編譯,并且有一個文件系統(tǒng)緩存,即使在重新啟動后也可以快速重建。另外,使用dynamic import()語法,分割輸出包。

以下是Parcel2的官方網(wǎng)址,你可以查看它其他特性。

  1. https://v2.parceljs.org/ 

搭建FastReactApp項目

我們首先需要安裝FastReactApp,這里你需要全局安裝一個為FastReactApp而生的命令腳手架FastReactCli,它可以更快地為你生成一個FastReactApp項目。

在安裝之前,你需要確保你的Node版本>=12.0.0。

全局安裝

輸入命令:

  1. npm install fast-react-cli -g 

初始化項目

輸入命令:

  1. fast-react-cli init <projectName> 

例:這里,我初始化一個名稱為myreact2的項目,選擇fast-react-app@1.0.1項目模板。

然后回車,項目初始化完成。

檢測版本

輸入命令:

  1. fast-react-cli -v 

我們目前fast-react-cli最新版本是1.1.7。

安裝項目依賴

我們使用fast-react-cli安裝上了FastReactApp,我們下一步需要安裝項目的依賴。

在安裝之前,你需要注意以下幾點:

如果你的項目需要引入圖片,你需要使用@parcel/transformer-image依賴,它可以調(diào)整圖像的大小、更改圖像的格式和質(zhì)量。為了完成這些圖像轉(zhuǎn)換,它依賴于圖像轉(zhuǎn)換庫Sharp,因此,需要將幾個特定的文件導(dǎo)入NPM緩存路徑下的特定文件夾中。

1. 獲取文件

打開網(wǎng)址:

  1. https://github.com/lovell/sharp-libvips/ 

找到兩個與您的計算機(jī)環(huán)境匹配的文件,以下是兩個文件,xxx代表計算機(jī)環(huán)境。

  1. 1. libvips-8.9.0-xxx.tar.gz 
  2.  
  3. 2. libvips-8.10.5-xxx.tar.br 

darwin-x64 一般指Mac OS環(huán)境,win32-x64 一般指 Windows環(huán)境。

2. 查找文件夾

鍵入以下命令以獲取NPM緩存路徑:

  1. npm config get cache 

獲得路徑后,在此_libvips這個文件夾,將符合你計算機(jī)環(huán)境的兩個文件放入這個文件夾內(nèi)。

至此大功告成。

如果你的項目不引入圖片,你可以不用看以上內(nèi)容。另外,你需要把package.json文件中的"devDependencies"屬性內(nèi)的@parcel/transformer-image依賴刪除掉,還有項目中默認(rèn)會引入圖片,把相應(yīng)引入圖片地址的代碼段刪除掉即可,因為這個依賴默認(rèn)是安裝的。

我們默認(rèn)我們項目需要它,然后我們也做完了以上需要注意的工作。那么,現(xiàn)在就可以安裝依賴了。

輸入命令:

  1. npm install 

 

運行項目

輸入命令:

  1. npm run serve 

 

這里需要聲明一點,項目默認(rèn)安裝了mocker-api,mocker-api 為 REST API 創(chuàng)建模擬 API。當(dāng)您嘗試在沒有實際 REST API 服務(wù)器的情況下測試應(yīng)用程序時,它會很有用。所以,使用concurrently并行地運行多個命令(同時跑前端和后端的服務(wù))。這里的mocker-api只有在開發(fā)環(huán)境中適用。

項目默認(rèn)端口號為:3000,當(dāng)然你也可以在package.json文件中修改默認(rèn)配置。

  1. "scripts": { 
  2.   "start""parcel ./public/index.html --port 3000 --no-source-maps"
  3.   "build""parcel build ./public/index.html --no-source-maps"
  4.   "api""mocker ./mock/mocker.js"
  5.   "serve""concurrently \"yarn api\" \"yarn start\"" 
  6. }, 

--port 3000這里你可以修改端口,這行命令配置是基于Parcel 2,更多配置可以參考:

  1. https://v2.parceljs.org/features/cli/ 

我們在瀏覽器上輸入http://localhost:3000/。

項目成功啟動。

發(fā)布項目

輸入命令:

  1. npm run build 

將用于生產(chǎn)的應(yīng)用程序生成到buildDir文件夾。它在生產(chǎn)模式下正確地進(jìn)行反應(yīng),并優(yōu)化構(gòu)建以獲得最佳性能。構(gòu)建被縮小,文件名包含哈希。

你的應(yīng)用程序已準(zhǔn)備好部署。

FastReactApp資源

介紹完如果搭建項目了,下面,我們來看下FastReactApp給我們默認(rèn)安裝了那些資源依賴。

  • parcel
  • concurrently
  • mocker-api
  • eslint
  • babel-plugin-import
  • antd
  • axios
  • immutable
  • react
  • react-dom
  • react-redux
  • react-router
  • react-router-dom
  • redux
  • redux-immutable
  • redux-thunk
  • styled-components
  • web-vitals

前三項我們已經(jīng)之前介紹過了,這里就不再復(fù)述了,下面,我們將挑幾個代表性的資源依賴介紹下。

eslint可謂是現(xiàn)代前端開發(fā)過程中必備的工具了。其用法簡單,作用卻很大,使用過程中不知曾幫我減少過多少次可能的 bug。其實仔細(xì)想想前端開發(fā)過程中的必備工具似乎也沒有那么多,ESLint 做為必備之一,值得深挖,理解其工作原理。

babel-plugin-import是一款babel插件,在編譯過程中將import的寫法自動轉(zhuǎn)換成按需引入的方式。

antd是基于Ant Design 設(shè)計體系的 React UI 組件庫,用于研發(fā)企業(yè)級中后臺產(chǎn)品。Ant Design 2.0官網(wǎng)上有兩句耐人尋味的話,我特別喜歡。

  • “Ant Design 無法保證業(yè)務(wù)產(chǎn)品能否成功,但是能幫助業(yè)務(wù)產(chǎn)品『正確的成功』或者『正確的失敗』。”
  • “Ant Design 不但追求『用戶』的使用體驗,還追求『設(shè)計者』和『開發(fā)者』的使用體驗。”

immutable對象是不可直接賦值的對象,它可以有效的避免錯誤賦值的問題。在react中,immutable主要是防止state對象被錯誤賦值。在Rudux中因為深拷貝對性能的消耗太大了(用到了遞歸,逐層拷貝每個節(jié)點)。但當(dāng)你使用immutable數(shù)據(jù)的時候:只會拷貝你改變的節(jié)點,從而達(dá)到了節(jié)省性能。immutable的不可變性讓純函數(shù)更強大,每次都返回新的immutable的特性讓程序員可以對其進(jìn)行鏈?zhǔn)讲僮?,用起來更方便?/p>

styled-components有以下幾點:1、樣式寫在 js 文件里,降低 js 對 css 文件的依賴。2、樣式可以使用變量,更加靈活。3、使用方便,不需要配置 webpack、開箱即用??梢哉f做到了”All in js“。

web-vitals庫是一個小型(約1K)模塊化庫,用于測量真實用戶的所有web vitals指標(biāo),精確匹配Chrome對這些指標(biāo)的測量方式,并報告給其他Google工具(例如Chrome用戶體驗報告、頁面速度洞察、搜索控制臺的速度報告)。

結(jié)語

FastReactApp官方文檔網(wǎng)址:

  1. https://www.maomin.club/site/fastReactApp/ 

  

 

責(zé)任編輯:姜華 來源: 前端歷劫之路
相關(guān)推薦

2021-12-23 10:35:32

SpringCloud腳手架架構(gòu)

2016-08-10 14:59:41

前端Javascript工具

2025-05-26 08:45:00

AvueVue.js前端

2016-09-07 15:35:06

VueReact腳手架

2017-07-21 09:56:46

Webpack3 Vue.js腳手架

2021-01-07 05:34:07

腳手架JDK緩存

2018-06-11 14:39:57

前端腳手架工具node.js

2018-08-30 16:08:37

Node.js腳手架工具

2014-08-15 09:36:06

2015-02-11 09:44:49

React.js緩存構(gòu)建

2022-04-24 11:33:47

代碼管理工程

2020-06-29 11:35:02

Spring BootJava腳手架

2021-08-30 06:59:06

StrviewAppStrview.js項目

2021-11-08 09:35:09

Vue代碼前端

2021-04-11 07:33:03

開發(fā)Vue技術(shù)棧js

2021-10-08 06:10:43

前端技術(shù)Vue

2021-08-17 21:52:04

工具

2025-05-16 07:24:41

Springkafka腳手架

2020-05-19 10:13:45

Java開發(fā)代碼

2022-07-18 07:58:46

Spring工具工具類
點贊
收藏

51CTO技術(shù)棧公眾號