如何在react項(xiàng)目中做公共配置文件

更新時(shí)間：2023年10月20日 09:22:33 作者：尼古拉斯二嘎

這篇文章主要介紹了如何在react項(xiàng)目中做公共配置文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

在react項(xiàng)目中做公共配置文件

在我們的react項(xiàng)目中有public文件夾，這個(gè)地方存放都是靜態(tài)文件不會(huì)被編譯，所以我們的靜態(tài)公共配置文件就放在這里

公共配置文件放在這里有一個(gè)好處就是任何人可以實(shí)時(shí)修改配置文件，然后程序會(huì)根據(jù)你的修改運(yùn)行對(duì)應(yīng)的邏輯或者變量，

如：

我們的開發(fā)人員做了這個(gè)配置文件功能，我們就可以告訴其他非研發(fā)同事在這里配置所需內(nèi)容，是不是很方便？

下面來看一下

1.在public中創(chuàng)建config.js

window.config = {
	baseUrl: 'xxxxx',
	mainTitle: 'xxxx',
	imgUrl: 'xxxx',
	...
}

2.在index.html中添加

注意這里的%PUBLIC_URL%是工程內(nèi)置的寫法，我們創(chuàng)建工程的時(shí)候在index.html可以看到很多這樣的寫法，意思就是路徑取public文件

而且我建議大家使用script引入，這樣每次刷新頁面的時(shí)候能保證獲取到我們修改config.js后的內(nèi)容，如果使用import的話，會(huì)在編譯的時(shí)候直接打包進(jìn)去，導(dǎo)致打完包再修改配置文件就無效了

<script src = "%PUBLIC_URL%/config.js"></script>

3.在入口src -> index.js文件中

// 大家應(yīng)該很熟悉，就是將功能配置文件的內(nèi)容掛載到全局，這個(gè)跟vue的寫法大同小異
React.Component.prototype.$config = window.config

4.在組件中使用，比如我們?cè)诠才渲梦募刑砑恿藞D片地址，這樣用：

process.env.PUBLIC_URL

let imgUrl = this.$config.imgUrl
<img  src={`${process.env.PUBLIC_URL}/${imgUrl}`}></ img>

在上面我們看到了process.env，他是Nodejs提供的一個(gè)API，它返回一個(gè)包含用戶環(huán)境信息的對(duì)象。

如果我們給Nodejs

設(shè)置一個(gè)環(huán)境變量，并把它掛載在 process.env 返回的對(duì)象上，便可以在代碼中進(jìn)行相應(yīng)的環(huán)境判斷

// 如我們有時(shí)會(huì)看到這樣的代碼，就是判斷當(dāng)前是生產(chǎn)還是開發(fā)環(huán)境來決定mode字段的定義
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

react項(xiàng)目優(yōu)化配置

優(yōu)化-配置CDN

通過 craco 來修改 webpack 配置，從而實(shí)現(xiàn) CDN 優(yōu)化

 yarn add  @craco/craco
//或者
 npm install  @craco/craco --save

在項(xiàng)目根目錄新建craco.config.js文件

 
 
// 添加自定義對(duì)于webpack的配置
 
const path = require('path')
const { whenProd, getPlugin, pluginByName } = require('@craco/craco')
 
module.exports = {
  // webpack 配置
  webpack: {
    // 配置別名
    alias: {
      // 約定：使用 @ 表示 src 文件所在路徑
      '@': path.resolve(__dirname, 'src')
    },
    // 配置webpack
    // 配置CDN
    configure: (webpackConfig) => {
      // webpackConfig自動(dòng)注入的webpack配置對(duì)象
      // 可以在這個(gè)函數(shù)中對(duì)它進(jìn)行詳細(xì)的自定義配置
      // 只要最后return出去就行
      let cdn = {
        js: [],
        css: []
      }
      // 只有生產(chǎn)環(huán)境才配置
      whenProd(() => {
        // key:需要不參與打包的具體的包
        // value: cdn文件中 掛載于全局的變量名稱 為了替換之前在開發(fā)環(huán)境下
        // 通過import 導(dǎo)入的 react / react-dom
        webpackConfig.externals = {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
        // 配置現(xiàn)成的cdn 資源數(shù)組 現(xiàn)在是公共為了測(cè)試
        // 實(shí)際開發(fā)的時(shí)候 用公司自己花錢買的cdn服務(wù)器
        cdn = {
          js: [
            'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
            'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
          ],
          css: []
        }
      })
 
      // 都是為了將來配置 htmlWebpackPlugin插件 將來在public/index.html注入
      // cdn資源數(shù)組時(shí) 準(zhǔn)備好的一些現(xiàn)成的資源
      const { isFound, match } = getPlugin(
        webpackConfig,
        pluginByName('HtmlWebpackPlugin')
      )
 
      if (isFound) {
        // 找到了HtmlWebpackPlugin的插件
        match.userOptions.cdn = cdn
      }
 
      return webpackConfig
    }
  }
}

public/index.html

<body>
  <div id="root"></div>
  <!-- 加載第三發(fā)包的 CDN 鏈接 -->
  <% htmlWebpackPlugin.userOptions.cdn.js.forEach(cdnURL => { %>
    <script src="<%= cdnURL %>"></script>
  <% }) %>
</body>

優(yōu)化-路由懶加載

使用步驟

在 App 組件中，導(dǎo)入 Suspense 組件
在路由Router 內(nèi)部，使用 Suspense 組件包裹組件內(nèi)容
為 Suspense 組件提供 fallback 屬性，指定 loading 占位內(nèi)容
導(dǎo)入 lazy 函數(shù)，并修改為懶加載方式導(dǎo)入路由組件

代碼實(shí)現(xiàn)

App.js

import { Routes, Route } from 'react-router-dom'
import { HistoryRouter, history } from './utils/history'
import { AuthRoute } from './components/AuthRoute'
 
// 導(dǎo)入必要組件
import { lazy, Suspense } from 'react'
// 按需導(dǎo)入路由組件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))
 
function App () {
  return (
    <HistoryRouter history={history}>
      <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
        <Routes>
          {/* 需要鑒權(quán)的路由 */}
          <Route path="/" element={
            <AuthRoute>
              <Layout />
            </AuthRoute>
          }>
            {/* 二級(jí)路由默認(rèn)頁面 */}
            <Route index element={<Home />} />
            <Route path="article" element={<Article />} />
            <Route path="publish" element={<Publish />} />
          </Route>
          {/* 不需要鑒權(quán)的路由 */}
          <Route path='/login' element={<Login />} />
        </Routes>
      </Suspense>
    </HistoryRouter>
  )
}
 
export default App

查看效果

我們可以在打包之后，通過切換路由，監(jiān)控network面板資源的請(qǐng)求情況，驗(yàn)證是否分隔成功