react以create-react-app為基礎(chǔ)創(chuàng)建項目的示例分析

發(fā)布時間：2021-06-07 13:15:06 來源：億速云閱讀：202 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)react以create-react-app為基礎(chǔ)創(chuàng)建項目的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是create-react-app

create-react-app是一個js庫，使用它能夠很方便地建立react項目，免去了建立react項目時配置webpack、調(diào)試服務(wù)器、運行腳本等麻煩，你只需要使用這個庫，便可以一鍵完成react項目的創(chuàng)建初始化項目

首先，要先利用create-react-app創(chuàng)建一個react項目，可參考https://github.com/facebookincubator/create-react-app

注：用“[ ]”包裹的都是可自定義的內(nèi)容，例如：cd [project-name]，實際上可能是cd my-app，也可能是cd my-project?？傊癧 ]”包裹的內(nèi)容，只表示上下文里相互對應(yīng)的變量。

npm install -g create-react-app 
 
create-react-app [project-name] 
cd [project-name]

運行完以上命令就已經(jīng)處在新建的項目中了，此時運行npm run start和npm run build了。但是，默認(rèn)所有配置是隱藏起來的，要想自定義配置，需要運行一個命令：

npm run eject

此時會提示，該命令不可逆，是否繼續(xù)，輸入y，這樣所有配置項就都出來了。這時候也可以做一些定制化的配置了，比如：

修改build后的output位置

js / css / img等靜態(tài)資源會默認(rèn)輸出到 build -> static 下面，其配置項在config -> webpack.config.prod.js 里。

js在output屬性里，大約第60行；
css在開頭的cssFilename變量聲明，大約第38行；
圖片等在module -> rules的loader配置里，大約第143行；

map文件由devtool屬性控制，如果不想要map，注釋掉就可以，大約第57行；

manifest.json在ManifestPlugin的配置里，大約294行；

基礎(chǔ)模板在HtmlWebpackPlugin的配置里，不過可以看到，是引的 ‘./paths.js' 文件，所以要修改 config -> paths.js 里面的 appHtml 屬性；

默認(rèn)在build時會清空build目錄，配置項是scripts -> build.js 里的 fs.emptyDirSync(paths.appBuild); 這一句，注釋掉就不會把老文件刪掉了（灰度發(fā)布的時候可能會用到）；

不eject其他修改配置的方法

除了 npm run eject 暴露出所有配置文件外，還有其他辦法修改配置，由于本文主題原因不做展開，僅給出相關(guān)鏈。

一個（部分人認(rèn)為）比較優(yōu)雅的方法，即引入 react-app-rewired 插件來實現(xiàn)配置覆蓋。需要在根目錄新建一個 config-overrides.js 文件，想配置啥就寫啥（怎么又多出來一種配置。。。），還需要重寫下npm start等相關(guān)命令，詳情點擊鏈接查看。

另一個可參考create-react-app的git主頁上推薦的Adding a CSS Preprocessor (Sass, Less etc.) 例子。大概思路就是先安裝一個node環(huán)境可編譯sass的插件node-sass-chokidar，然后利用npm-run-all同時運行npm start 和 watch-css（監(jiān)聽sass文件的命令）。個人感覺繞了個大圈，還是再議吧。。。

react等作為全局變量不打包

為了利用cdn，我們常會在頁面里引用react或其他類似庫的script標(biāo)簽，這樣在瀏覽器環(huán)境里就有了相應(yīng)的全局變量，同時減少了js的體積。下面以react為例。

首先在config -> webpack.config.prod.js 的配置里加入如下代碼：

module.exports = { 
 ... 
 externals: { 
 'react': 'React', 
 'react-dom': 'ReactDOM' 
 }, 
 ... 
}

key對應(yīng)的是庫的名字，value對應(yīng)的是全局變量的名字。這里要注意，全局變量的名字要與代碼中import的名字一致，要保證規(guī)范。

另外，此處要修改下 html-webpack-plugin 插件配置的模板文件，因為需要加入全局變量，所以加入相應(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 
 --> 
<!-- 新插入的兩個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>

問：既然瀏覽器里面都有了全局變量，如window.React，那么代碼里面其實就不用 import React from 'react' 了，更進(jìn)一步，如果連react都不用引了，那么設(shè)置externals又有什么用呢（這個地方好好縷縷，是不是這個理）？

答：如果按照上面所說，去掉import和external，build出來的文件是可以順利的在瀏覽器端運行的。但是如果開發(fā)的時候是起的server，那么server端就沒法分析引用了，也就沒法做到熱更新了，另外，對于前后端同構(gòu)來說，服務(wù)端也是找不到依賴的。所以，如果你是開著靜態(tài)文件的監(jiān)聽，并且手動刷新瀏覽器的話，不import和external理論上是沒問題的。

安裝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里面最后再加個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` 會加載 less 文件 
]

如果啟用了 style:true 那就必須是裝less了

關(guān)于“react以create-react-app為基礎(chǔ)創(chuàng)建項目的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

react以create-react-app為基礎(chǔ)創(chuàng)建項目的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽