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

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

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

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

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

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

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

二、腳手架是什么呢？

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

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

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

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

三、前端腳手架

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

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

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

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

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

四、安裝node

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

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

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

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

輸入以下命令：

node --version
npm --version

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

五、包管理工具

什么是npm？

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

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

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

npm install -g yarn

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

六、Yarn和npm命令對比

七、安裝腳手架

補充：在國內(nèi)，某些情況使用npm和yarn可能無法正常安裝一個庫，這個時候我們可以選擇使用cnpm

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

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

npm install -g create-react-app

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

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

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

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

注意：項目名稱不能包含大寫字母

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

create-react-app 項目名稱

創(chuàng)建完成后，進入對應(yīng)的目錄，就可以將項目跑起來：

cd 01-test-reactyarn start

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

十、了解PWA

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

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

PWA解決了哪些問題呢？

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

十一、webpack是什么

我們說過React的腳手架是基于Webpack來配置的：

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

?

十二、腳手架中的webpack

在這里我們暫時不展開來講webpack，因為里面的內(nèi)容是非常多的（后續(xù)會有專門講webpack的專題）；
但是，很奇怪：我們并沒有在目錄結(jié)構(gòu)中看到任何webpack相關(guān)的內(nèi)容？

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

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

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

yarn eject

十三、腳手架中的webpack

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

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

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

?

十五、開始編寫代碼

在src目錄下，創(chuàng)建一個index.js文件，因為這是webpack打包的入口。
在index.js中開始編寫React代碼：

我們會發(fā)現(xiàn)和寫的代碼是邏輯是一致的；只是在模塊化開發(fā)中，我們需要手動的來導(dǎo)入React、ReactDOM，因為它們都是在我們安裝的模塊中；

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

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

最新評論