- 編程中腳手架是一種工具,可以幫我們快速生成項目的工程化結(jié)構(gòu)
npm
- 全稱 Node Package Manager, 即 node 包管理工具
- 作用是幫我們管理依賴的工具包(比如,react,react-dom,axios,babel,webpack 等)
- 作者開發(fā)的目的就是為了解決 模塊管理很糟糕 的問題
- 在國內(nèi),某些情況使用 npm 和 yarn 可能無法正常安裝一個庫,這個時候我們可以選擇使用 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
yarn
- yarn 是由 Facebook之众、google咆槽、Exponent 和 Tilde 聯(lián)合推出了一個新的 JS 包管理工具
- yarn 是為了你補(bǔ) npm 的一些缺陷而出現(xiàn)的
- 早期的 npm 存在很多的缺陷,比如安裝依賴進(jìn)度很慢,版本依賴混亂等等一系列問題, 雖然從 npm5 版本開始,進(jìn)行了很多升級和改進(jìn),但是依然很多人喜歡使用 yarn
- React 腳手架默認(rèn)也是使用 yarn
- yarn 安裝指令
npm install -g yarn, -g 是全局安裝的意思,安裝完成后可以使用yarn --version查看版本 -
yarn 和 npm 命令對比如下:
React 腳手架
- React 腳手架: create-react-app, 可以幫我們生成一個通用的目錄結(jié)構(gòu),并且已經(jīng)將我們所需要的工程環(huán)境配置好
- React 腳手架是使用 node 編寫的,并且是基于 webpack 的,所以必須要在自己的電腦上安裝 node 環(huán)境吨拍。
- 安裝指令:
npm install -g create-react-app, 安裝成功后可以使用create-react-app --version查看版本
使用創(chuàng)建 React 項目
- 命令:
create-react-app 項目名稱
- 需要注意的是項目名稱不能包含大寫字母
- 創(chuàng)建完成后進(jìn)入對應(yīng)的目錄,就可以將項目跑起來
- cd 項目名稱
- yarn start
目錄結(jié)構(gòu)
-
腳手架創(chuàng)建好的項目目錄結(jié)構(gòu)及文件用途如下:
index.html 作為整個應(yīng)用程序的入口文件,是有 webpack 指定的,如果要改需要在 webpack 中修改
package.json: 包管理文件, 版本號之前帶^表示可以自動升級小版本,如果要確認(rèn)具體使用的是那個版本可以在 yarn.lock 中查看
yarn.lock: 依賴包際安裝的什么版本
可以將 src 文件夾下的文件全部刪除, public 文件下除 favicon.ico 和 index.html 外的文件也刪除
PWA
- PWA 全稱 Progressive Web App, 即漸進(jìn)式 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 解決了那些問題
- 可以添加至主屏幕,點擊主屏幕圖標(biāo)可以實現(xiàn)啟動動畫及隱藏地址欄
- 實現(xiàn)離線緩存功能,即使用戶手機(jī)沒有網(wǎng)絡(luò),依然可以使用一些離線功能
- 實現(xiàn)消息推送
- 等等一系列類似于 Native App 相關(guān)的功能
webpack
- React 的腳手架是基于 webpack 來配置的,它是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)
-
當(dāng) webpack 處理應(yīng)用程序時,他會遞歸地構(gòu)建一個依賴關(guān)系圖,其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle
- 在 react腳手架創(chuàng)建的目錄結(jié)構(gòu)中并沒有看到任何 webpack 相關(guān)內(nèi)容, 原因是 React 腳手架將 webpack 相關(guān)的配置隱藏起來了
- 如果想看到 webpack 的配置信息,可以執(zhí)行 package.json 文件中的一個腳本:
"eject":"react-scripts eject", 執(zhí)行命令yarn eject這個命令是不可逆的 - 顯示 webpack 相關(guān)配置信息后目錄結(jié)構(gòu)如下,多了 config 和 scripts 文件夾
