一、前端工程的復(fù)雜化

如果我們只是開(kāi)發(fā)幾個(gè)小的demo程序，那么永遠(yuǎn)不需要考慮一些復(fù)雜的問(wèn)題：

比如目錄結(jié)構(gòu)如何組織劃分；比如如何管理文件之間的相互依賴；比如如何管理第三方模塊的依賴；比如項(xiàng)目發(fā)布前如何壓縮、打包項(xiàng)目；等等…

現(xiàn)代的前端項(xiàng)目已經(jīng)越來(lái)越復(fù)雜了：

• 不會(huì)再是在HTML中引入幾個(gè)css文件，引入幾個(gè)編寫的js文件或者第三方的js文件這么簡(jiǎn)單；
• 比如css可能是使用less、sass等預(yù)處理器進(jìn)行編寫，我們需要將它們轉(zhuǎn)成普通的css才能被瀏覽器解析；
• 比如JavaScript代碼不再只是編寫在幾個(gè)文件中，而是通過(guò)模塊化的方式，被組成在成百上千個(gè)文件中，我們需要通過(guò)模塊化的技術(shù)來(lái)管理它們之間的相互依賴；
• 比如項(xiàng)目需要依賴很多的第三方庫(kù)，如何更好的管理它們（比如管理它們的依賴、版本升級(jí)等）；
  

為了解決上面這些問(wèn)題，我們需要再去學(xué)習(xí)一些工具：

• 比如babel、webpack、gulp。配置它們轉(zhuǎn)換規(guī)則、打包依賴、熱更新等等一些的內(nèi)容；
• 腳手架的出現(xiàn)，就是幫助我們解決這一系列問(wèn)題的；

二、腳手架是什么呢？

傳統(tǒng)的腳手架指的是建筑學(xué)的一種結(jié)構(gòu)：在搭建樓房、建筑物時(shí)，臨時(shí)搭建出來(lái)的一個(gè)框架；

編程中提到的腳手架（Scaffold），其實(shí)是一種工具，幫我們可以快速生成項(xiàng)目的工程化結(jié)構(gòu)；

• 每個(gè)項(xiàng)目作出完成的效果不同，但是它們的基本工程化結(jié)構(gòu)是相似的；
• 既然相似，就沒(méi)有必要每次都從零開(kāi)始搭建，完全可以使用一些工具，幫助我們生產(chǎn)基本的工程化模板；
• 不同的項(xiàng)目，在這個(gè)模板的基礎(chǔ)之上進(jìn)行項(xiàng)目開(kāi)發(fā)或者進(jìn)行一些配置的簡(jiǎn)單修改即可；
• 這樣也可以間接保證項(xiàng)目的基本機(jī)構(gòu)一致性，方便后期的維護(hù)；
  

總結(jié)：腳手架讓項(xiàng)目從搭建到開(kāi)發(fā)，再到部署，整個(gè)流程變得快速和便捷；

三、前端腳手架

對(duì)于現(xiàn)在比較流行的三大框架都有屬于自己的腳手架：

• Vue的腳手架：vue-cli
• Angular的腳手架：angular-cli
• React的腳手架：create-react-app

它們的作用都是幫助我們生成一個(gè)通用的目錄結(jié)構(gòu)，并且已經(jīng)將我們所需的工程環(huán)境配置好。
使用這些腳手架需要依賴什么呢？

• 目前這些腳手架都是使用node編寫的，并且都是基于webpack的；
• 所以我們必須在自己的電腦上安裝node環(huán)境；

這里我們主要是學(xué)習(xí)React，所以我們還是以React的腳手架工具：create-react-app作為講解；

四、安裝node

React腳手架本身需要依賴node，所以我們需要安裝node環(huán)境：

無(wú)論是windows還是Mac OS，都可以通過(guò)node官網(wǎng)直接下載；

官網(wǎng)地址：https://nodejs.org/en/download/注意：這里推薦大家下載LTS（Long-term support ）版本，是長(zhǎng)期支持版本，會(huì)比較穩(wěn)定；

下載后，雙擊安裝即可：
1.安裝過(guò)程中，會(huì)自動(dòng)配置環(huán)境變量；
2.安裝時(shí)，會(huì)同時(shí)幫助我們安裝npm管理工具；

輸入以下命令：

node --version
npm --version

若出現(xiàn)版本號(hào)則表明安裝成功了

五、包管理工具

什么是npm？

• 全稱 Node Package Manager，即“node包管理器”；
• 作用肯定是幫助我們管理一下依賴的工具包（比如react、react-dom、axios、babel、webpack等等）；
• 作者開(kāi)發(fā)的目的就是為了解決“模塊管理很糟糕”的問(wèn)題；

另外，還有一個(gè)大名鼎鼎的node包管理工具yarn：

• Yarn是由Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具；
• Yarn 是為了彌補(bǔ) npm 的一些缺陷而出現(xiàn)的；
• 早期的npm存在很多的缺陷，比如安裝依賴速度很慢、版本依賴混亂等等一系列的問(wèn)題；
• 雖然從npm5版本開(kāi)始，進(jìn)行了很多的升級(jí)和改進(jìn)，但是依然很多人喜歡使用yarn；
• React腳手架默認(rèn)也是使用yarn；

npm install -g yarn

輸入yarn --version，若出現(xiàn)版本號(hào)輸出，則表明安裝成功

六、Yarn和npm命令對(duì)比

七、安裝腳手架

補(bǔ)充：在國(guó)內(nèi)，某些情況使用npm和yarn可能無(wú)法正常安裝一個(gè)庫(kù)，這個(gè)時(shí)候我們可以選擇使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

最后一個(gè)需要安裝的是創(chuàng)建React項(xiàng)目的腳手架：

npm install -g create-react-app

輸入create-react-app --version，若出現(xiàn)版本號(hào)輸出，則表明安裝成功

八、創(chuàng)建React項(xiàng)目

現(xiàn)在，我們就可以通過(guò)腳手架來(lái)創(chuàng)建React項(xiàng)目了。

創(chuàng)建React項(xiàng)目的命令如下：

注意：項(xiàng)目名稱不能包含大寫字母

另外還有更多創(chuàng)建項(xiàng)目的方式，可以參考GitHub的readme

create-react-app 項(xiàng)目名稱

創(chuàng)建完成后，進(jìn)入對(duì)應(yīng)的目錄，就可以將項(xiàng)目跑起來(lái)：

cd 01-test-reactyarn start

九、目錄結(jié)構(gòu)分析

十、了解PWA

整個(gè)目錄結(jié)構(gòu)都非常好理解，只是有一個(gè)PWA相關(guān)的概念：

• PWA全稱Progressive Web App，即漸進(jìn)式WEB應(yīng)用；
• 一個(gè) PWA 應(yīng)用首先是一個(gè)網(wǎng)頁(yè), 可以通過(guò) Web 技術(shù)編寫出一個(gè)網(wǎng)頁(yè)應(yīng)用；
• 隨后添加上 App Manifest 和 Service Worker 來(lái)實(shí)現(xiàn) PWA 的安裝和離線等功能；
• 這種Web存在的形式，我們也稱之為是 Web App；
  

PWA解決了哪些問(wèn)題呢？

• 可以添加至主屏幕，點(diǎn)擊主屏幕圖標(biāo)可以實(shí)現(xiàn)啟動(dòng)動(dòng)畫以及隱藏地址欄；
• 實(shí)現(xiàn)離線緩存功能，即使用戶手機(jī)沒(méi)有網(wǎng)絡(luò)，依然可以使用一些離線功能；
• 實(shí)現(xiàn)了消息推送；
• 等等一系列類似于Native App相關(guān)的功能；

十一、webpack是什么

我們說(shuō)過(guò)React的腳手架是基于Webpack來(lái)配置的：

• webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)；
• 當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle；
  

?

十二、腳手架中的webpack

在這里我們暫時(shí)不展開(kāi)來(lái)講webpack，因?yàn)槔锩娴膬?nèi)容是非常多的（后續(xù)會(huì)有專門講webpack的專題）；
但是，很奇怪：我們并沒(méi)有在目錄結(jié)構(gòu)中看到任何webpack相關(guān)的內(nèi)容？

原因是React腳手架講webpack相關(guān)的配置隱藏起來(lái)了（其實(shí)從Vue CLI3開(kāi)始，也是進(jìn)行了隱藏）；

如果我們希望看到webpack的配置信息，應(yīng)該怎么來(lái)做呢？

• 我們可以執(zhí)行一個(gè)package.json文件中的一個(gè)腳本："eject": "react-scripts eject"
• 這個(gè)操作是不可逆的，所以在執(zhí)行過(guò)程中會(huì)給與我們提示；

yarn eject

十三、腳手架中的webpack

十四、文件結(jié)構(gòu)刪除

通過(guò)腳手架創(chuàng)建完項(xiàng)目，很多同學(xué)還是會(huì)感覺(jué)目錄結(jié)構(gòu)過(guò)于復(fù)雜，所以我打算從零帶著大家來(lái)編寫代碼。
我們先將不需要的文件統(tǒng)統(tǒng)刪掉：

將src下的所有文件都刪除將public文件下出列favicon.ico和index.html之外的文件都刪除掉

?

十五、開(kāi)始編寫代碼

在src目錄下，創(chuàng)建一個(gè)index.js文件，因?yàn)檫@是webpack打包的入口。
在index.js中開(kāi)始編寫React代碼：

我們會(huì)發(fā)現(xiàn)和寫的代碼是邏輯是一致的；只是在模塊化開(kāi)發(fā)中，我們需要手動(dòng)的來(lái)導(dǎo)入React、ReactDOM，因?yàn)樗鼈兌际窃谖覀儼惭b的模塊中；

如果我們不希望直接在 ReactDOM.render 中編寫過(guò)多的代碼，就可以單獨(dú)抽取一個(gè)組件App.js：

到此這篇關(guān)于React腳手架搭建的學(xué)習(xí)的文章就介紹到這了,更多相關(guān)React 腳手架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論