react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目
什么是create-react-app
create-react-app是一個(gè)js庫(kù)，使用它能夠很方便地建立react項(xiàng)目，免去了建立react項(xiàng)目時(shí)配置webpack、調(diào)試服務(wù)器、運(yùn)行腳本等麻煩，你只需要使用這個(gè)庫(kù)，便可以一鍵完成react項(xiàng)目的創(chuàng)建初始化項(xiàng)目
首先，要先利用create-react-app創(chuàng)建一個(gè)react項(xiàng)目，可參考https://github.com/facebookincubator/create-react-app
注：用“[ ]”包裹的都是可自定義的內(nèi)容，例如：cd [project-name]，實(shí)際上可能是cd my-app，也可能是cd my-project?？傊癧 ]”包裹的內(nèi)容，只表示上下文里相互對(duì)應(yīng)的變量。
npm install -g create-react-app create-react-app [project-name] cd [project-name]
運(yùn)行完以上命令就已經(jīng)處在新建的項(xiàng)目中了，此時(shí)運(yùn)行npm run start和npm run build了。但是，默認(rèn)所有配置是隱藏起來(lái)的，要想自定義配置，需要運(yùn)行一個(gè)命令：
npm run eject
此時(shí)會(huì)提示，該命令不可逆，是否繼續(xù)，輸入y，這樣所有配置項(xiàng)就都出來(lái)了。這時(shí)候也可以做一些定制化的配置了，比如：
修改build后的output位置
js / css / img等靜態(tài)資源會(huì)默認(rèn)輸出到 build -> static 下面，其配置項(xiàng)在config -> webpack.config.prod.js 里。
- js在output屬性里，大約第60行 ；
- css在開(kāi)頭的cssFilename變量聲明，大約第38行；
- 圖片等在module -> rules的loader配置里，大約第143行；
map文件由devtool屬性控制，如果不想要map，注釋掉就可以，大約第57行；
manifest.json在ManifestPlugin的配置里，大約294行；
基礎(chǔ)模板在HtmlWebpackPlugin的配置里，不過(guò)可以看到，是引的 ‘./paths.js' 文件，所以要修改 config -> paths.js 里面的 appHtml 屬性；
默認(rèn)在build時(shí)會(huì)清空build目錄，配置項(xiàng)是scripts -> build.js 里的 fs.emptyDirSync(paths.appBuild); 這一句，注釋掉就不會(huì)把老文件刪掉了（灰度發(fā)布的時(shí)候可能會(huì)用到）；
不eject其他修改配置的方法
除了 npm run eject 暴露出所有配置文件外，還有其他辦法修改配置，由于本文主題原因不做展開(kāi)，僅給出相關(guān)鏈。
一個(gè)（部分人認(rèn)為）比較優(yōu)雅的方法，即引入 react-app-rewired 插件來(lái)實(shí)現(xiàn)配置覆蓋。需要在根目錄新建一個(gè) config-overrides.js 文件，想配置啥就寫啥（怎么又多出來(lái)一種配置。。。），還需要重寫下npm start等相關(guān)命令，詳情點(diǎn)擊鏈接查看。
另一個(gè)可參考create-react-app的git主頁(yè)上推薦的Adding a CSS Preprocessor (Sass, Less etc.) 例子。大概思路就是先安裝一個(gè)node環(huán)境可編譯sass的插件node-sass-chokidar，然后利用npm-run-all同時(shí)運(yùn)行npm start 和 watch-css（監(jiān)聽(tīng)sass文件的命令）。個(gè)人感覺(jué)繞了個(gè)大圈，還是再議吧。。。
react等作為全局變量不打包
為了利用cdn，我們常會(huì)在頁(yè)面里引用react或其他類似庫(kù)的script標(biāo)簽，這樣在瀏覽器環(huán)境里就有了相應(yīng)的全局變量，同時(shí)減少了js的體積。下面以react為例。
首先在config -> webpack.config.prod.js 的配置里加入如下代碼：
module.exports = {
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
...
}
key對(duì)應(yīng)的是庫(kù)的名字，value對(duì)應(yīng)的是全局變量的名字。這里要注意，全局變量的名字要與代碼中import的名字一致，要保證規(guī)范。
另外，此處要修改下 html-webpack-plugin 插件配置的模板文件，因?yàn)樾枰尤肴肿兞?，所以加入相?yīng)的script即可。以 public -> index.html 為例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- code here --> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <!-- code here --> <!-- 新插入的兩個(gè)js --> <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> </body> </html>
問(wèn)：既然瀏覽器里面都有了全局變量，如window.React，那么代碼里面其實(shí)就不用 import React from 'react' 了，更進(jìn)一步，如果連react都不用引了，那么設(shè)置externals又有什么用呢（這個(gè)地方好好縷縷，是不是這個(gè)理）？
答：如果按照上面所說(shuō)，去掉import和external，build出來(lái)的文件是可以順利的在瀏覽器端運(yùn)行的。但是如果開(kāi)發(fā)的時(shí)候是起的server，那么server端就沒(méi)法分析引用了，也就沒(méi)法做到熱更新了，另外，對(duì)于前后端同構(gòu)來(lái)說(shuō)，服務(wù)端也是找不到依賴的。所以，如果你是開(kāi)著靜態(tài)文件的監(jiān)聽(tīng)，并且手動(dòng)刷新瀏覽器的話，不import和external理論上是沒(méi)問(wèn)題的。
安裝sass或less（以sass為例）
npm install sass-loader node-sass --save-dev
或
npm install less-loader less --save-dev
安裝后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分別在css的loader配置里面修改兩處：
一是 test: /\.css$/ 增加scss和sass；二是use里面最后再加個(gè)loader，直接加 "sass-loader" 就可以了，也不用配置別的了（less同）。
//test: /\.css$/
test: /\.(css|scss|sass)$/
...
use:[
{
...
},
"sass-loader"
]
添加ant-design
安裝antd及按需加載的插件babel-plugin-import，參考https://ant.design/docs/react/introduce-cn
npm install antd babel-plugin-import --save-dev
在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入如下代碼：
plugins: [
['import', { libraryName: 'antd', style: 'css' }] // `style: true` 會(huì)加載 less 文件
]
如果啟用了 style:true 那就必須是裝less了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React組件性能最佳優(yōu)化實(shí)踐分享，React組件性能優(yōu)化的核心是減少渲染真實(shí)DOM節(jié)點(diǎn)的頻率，減少Virtual?DOM比對(duì)的頻率，更多相關(guān)內(nèi)容需要的朋友可以參考一下2023-03-03
React函數(shù)式組件Hook中的useEffect函數(shù)的詳細(xì)解析
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-10-10
React如何使用Portal實(shí)現(xiàn)跨層級(jí)DOM渲染
Portal 就像是一個(gè)“傳送門”,能讓你把組件里的元素“傳送到”其他 DOM 節(jié)點(diǎn)下面去渲染,下面小編就來(lái)和大家簡(jiǎn)單介紹一下具體的使用方法吧2025-04-04
這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
React中的render何時(shí)執(zhí)行過(guò)程
這篇文章主要介紹了React中的render何時(shí)執(zhí)行過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要為大家介紹了react函數(shù)組件類組件區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Context提供了一個(gè)無(wú)需為每層組件手動(dòng)添加props，就能在組件樹(shù)間進(jìn)行數(shù)據(jù)傳遞的方法。在一個(gè)典型的 React 應(yīng)用中，數(shù)據(jù)是通過(guò)props屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對(duì)于某些類型的屬性而言是極其繁瑣的2022-11-11
這篇文章主要介紹了淺談在react中如何實(shí)現(xiàn)掃碼槍輸入，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要為大家介紹了React性能debug場(chǎng)景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化使用詳解
這篇文章主要為大家介紹了React.memo?React.useMemo對(duì)項(xiàng)目性能優(yōu)化的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01