一. 認(rèn)識(shí)腳手架

1.1. 前端工程的復(fù)雜化

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

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

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

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

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

• 比如babel、webpack、gulp。配置它們轉(zhuǎn)換規(guī)則、打包依賴、熱更新等等一些的內(nèi)容；
• 你會(huì)發(fā)現(xiàn)，你還沒有開始做項(xiàng)目，你就面臨一系列的工程化問題；

腳手架的出現(xiàn)，就是幫助我們解決這一系列問題的；

1.2. 腳手架是什么呢？

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

腳手架

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

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

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

對于現(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作為講解；

二. create-react-app

2.1. 安裝相關(guān)的依賴

2.1.1. 安裝node

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

• 無論是windows還是Mac OS，都可以通過node官網(wǎng)直接下載；
• 官網(wǎng)地址：https://nodejs.org/en/download/
• 注意：這里推薦大家下載LTS（Long-term support ）版本，是長期支持版本，會(huì)比較穩(wěn)定；

nodejs下載

下載后，雙擊安裝即可：

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

檢測安裝的版本

2.1.2. 包管理工具

什么是npm？

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

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

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

安裝yarn：

npm install -g yarn

檢測yarn安裝的版本

yarn和npm的命令對比

NpmYarnnpm installyarn installnpm install [package]yarn add [package]npm install --save [package]yarn add [package]npm install --save-dev [package]yarn add [package] [--dev/-D]npm rebuildyarn install --forcenpm uninstall [package]yarn remove [package]npm uninstall --save [package]yarn remove [package]npm uninstall --save-dev [package]yarn remove [package]npm uninstall --save-optional [package]yarn remove [package]npm cache cleanyarn cache cleanrm -rf node_modules && npm installyarn upgrade

cnpm的使用

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

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

2.1.3. 安裝腳手架

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

npm install -g create-react-app

檢查React腳手架

2.2. 創(chuàng)建React項(xiàng)目

2.2.1. 創(chuàng)建React項(xiàng)目

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

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

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

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

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

• https://github.com/facebook/create-react-app；
• 上面的創(chuàng)建方式，默認(rèn)使用的yarn來管理整個(gè)項(xiàng)目包相關(guān)的依賴的；
• 如果希望使用npm，也可以在參數(shù)后面加上 --use-npm；

image-20200615115822464

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

cd 01-test-react yarn start

項(xiàng)目效果

2.2.2. 目錄結(jié)構(gòu)分析

我們可以通過VSCode打開項(xiàng)目：

項(xiàng)目目錄結(jié)構(gòu)

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

test-react ├─ README.md // readme說明文檔 ├─ package.json // 對整個(gè)應(yīng)用程序的描述：包括應(yīng)用名稱、版本號、一些依賴包、以及項(xiàng)目的啟動(dòng)、打包等等（node管理項(xiàng)目必備文件） ├─ public │ ├─ favicon.ico // 應(yīng)用程序頂部的icon圖標(biāo) │ ├─ index.html // 應(yīng)用的index.html入口文件 │ ├─ logo192.png // 被在manifest.json中使用 │ ├─ logo512.png // 被在manifest.json中使用 │ ├─ manifest.json // 和Web app配置相關(guān) │ └─ robots.txt // 指定搜索引擎可以或者無法爬取哪些文件 ├─ src │ ├─ App.css // App組件相關(guān)的樣式 │ ├─ App.js // App組件的代碼文件 │ ├─ App.test.js // App組件的測試代碼文件 │ ├─ index.css // 全局的樣式文件 │ ├─ index.js // 整個(gè)應(yīng)用程序的入口文件 │ ├─ logo.svg // 剛才啟動(dòng)項(xiàng)目，所看到的React圖標(biāo) │ ├─ serviceWorker.js // 默認(rèn)幫助我們寫好的注冊PWA相關(guān)的代碼 │ └─ setupTests.js // 測試初始化文件 └─ yarn.lock

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

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

PWA解決了哪些問題呢？

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

更多PWA相關(guān)的知識(shí)，可以自行去學(xué)習(xí)更多；

2.2.3. webpack配置

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

• 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í)不展開來講webpack，因?yàn)槔锩娴膬?nèi)容是非常多的（后續(xù)會(huì)有專門講webpack的專題）；

但是，很奇怪：我們并沒有在目錄結(jié)構(gòu)中看到任何webpack相關(guān)的內(nèi)容？

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

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

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

yarn eject

執(zhí)行腳本

查看和學(xué)習(xí)webpack相關(guān)的配置信息：

webpack相關(guān)配置

2.3. 從零編寫項(xiàng)目

2.3.1. 文件的刪減

通過腳手架創(chuàng)建完項(xiàng)目，很多同學(xué)還是會(huì)感覺目錄結(jié)構(gòu)過于復(fù)雜，所以我打算從零帶著大家來編寫代碼。

我們先將不需要的文件統(tǒng)統(tǒng)刪掉：

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

刪除后的目錄結(jié)構(gòu)

修改index.html文件：

• 我們需要?jiǎng)h除選中的內(nèi)容；
• 這兩行內(nèi)容是我們之前引入的一個(gè)圖標(biāo)和manifest文件

刪除選中的兩行內(nèi)容

2.3.2. 開始編寫代碼

在src目錄下，創(chuàng)建一個(gè)index.js文件，因?yàn)檫@是webpack打包的入口。

在index.js中開始編寫React代碼：

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

import React from "react"; import ReactDOM from 'react-dom';ReactDOM.render(<h2>Hello React</h2>, document.getElementById("root"));

展示效果

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

import React, { Component } from 'react';export default class App extends Component {render() {return <h2>Hello App</h2>} }

在index.js中引入App，并且使用它：

import React from "react"; import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App/>, document.getElementById("root"));

來源： coderwhy

推薦閱讀

JavaScript 如何讀取本地文件

JavaScript重構(gòu)技巧-降低函數(shù)復(fù)雜度

細(xì)品269個(gè)JavaScript小函數(shù)，讓你少加班熬夜（一）「值得收藏」

細(xì)品269個(gè)JavaScript小函數(shù)，讓你少加班熬夜（二）「值得收藏」

細(xì)品269個(gè)JavaScript小函數(shù)，讓你少加班熬夜（三）「值得收藏」

細(xì)品269個(gè)JavaScript小函數(shù)，讓你少加班熬夜（四）「值得收藏」

細(xì)品269個(gè)JavaScript小函數(shù)，讓你少加班熬夜（五）「值得收藏」

細(xì)品269個(gè)JavaScript小函數(shù)，讓你少加班熬夜（六）「值得收藏」

總結(jié)

以上是生活随笔為你收集整理的react打包后图片丢失_React系列四 - React脚手架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。