React工程搭建-記錄
一、創建react typescript命令
npx create-react-app xxxx --template typescript
二、工程配置
1.支持讀取json 文件在ts.config中配置
"moduleResolution": "node",
"resolveJsonModule": true,
2.css module 模組化 按需加載, 配置支持css
類型聲明 .d.ts方式
src下新建 custom.d.ts文件
declare module "*.css" {
const css : {[key: string]: string}
export default css
}
3.安裝插件 npm install typescript-plugin-css-modules --save-dev
讓 styles 也可以代碼提示
安裝完成后需要注冊啟用，在tsconfig中
"jsx": "react-jsx",
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
]
如果你是使用 vscode 開發的需要添加另外的配置如下：
根目錄創建.vscode文件夾及settings.json
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
- 配置媒體資源和字體
圖片資源一版要統一管理，在src下創建 assets 文件在創建分類 images 文件把文件放入其中就可以了
字體聲明：
@font-face {
font-family: "NbaFont";
font-display: block;
src: local("NbaFont"), url(../public/fonts/Knockout-c10.ttf);
}
@font-face {
font-family: "NbaRegularFont";
font-display: block;
src: local("NbaRegularFont"),
url(../public/fonts/Knockout-HTF67FullBantamwt-Regular.otf);
}
三、Craco 用于覆蓋React配置
Craco（Create React App Configuration Override）是一個用于覆蓋 Create React App（CRA）的默認配置的工具。它允許您在不 ejecting 的情況下自定義 CRA 的配置。以下是如何使用 Craco 的基本步驟：
安裝 Craco：
在您的 CRA 項目中，使用以下命令安裝 Craco：
npm install @craco/craco --save-dev
或者使用 Yarn：
yarn add @craco/craco --dev
創建 Craco 配置文件：
在項目根目錄下創建一個名為 craco.config.js 的文件。這個文件將包含您要覆蓋的配置。
更新 scripts：
在 package.json 文件中，將 react-scripts 替換為 craco。例如：
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
}
編寫配置：
在 craco.config.js 文件中，您可以編寫自定義配置。例如，要覆蓋 Webpack 配置，您可以這樣做：
const path = require('path');
module.exports = {
webpack: {
alias: {
'@components': path.resolve(__dirname, 'src/components/'),
},
},
};
在這個例子中，我們添加了一個新的路徑別名 @components，它指向 src/components/ 目錄。
使用自定義配置：
現在您可以在項目中使用自定義配置。例如，在上面的例子中，您可以這樣導入組件：
import MyComponent from '@components/MyComponent';
這只是 Craco 的一個簡單示例。您還可以覆蓋 Babel、ESLint、PostCSS 等配置。有關更多信息和示例，請查閱 Craco 文檔：
https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md
四、多環境打包
工程打包需要區分測試包，正式包（比如它們的請求base地址不同）可以配置不同.env文件，默認功能只有一個，React項目中使用dotenv可以幫助你管理環境變量
dotenv 是一個輕量級的 Node.js 庫，可以從 .env 文件中加載環境變量，非常方便。
安裝
npm install dotenv --save-dev
4.1 dotenv-cli
我在項目中直接用了dotenv-cli
從文件中加載環境變量, 它能將環境變量中的變量從 .env 文件加載到 process.env 中
npm install dotenv-cli
根目錄下創建.env 文件。如：.env.development
# 開發環境
PUBLIC_URL=/play/
REACT_APP_API_BASE_URL=https://testapi.nba.cn/
REACT_APP_SENSOR_URL=https://nba-dc-analytic.nbadata.cn/sa?project=default
REACT_APP_SHOW_VCONSOLE=true
REACT_APP_AWARD_BASE_URL=https://testapi.nba.cn
在項目中通過 process.env 獲取環境變量。例如：
import sensors from "sa-sdk-javascript";
export function initSensors() {
if (typeof window !== "undefined") {
console.log(process.env.REACT_APP_SENSOR_URL);
sensors.init({
show_log: true,
server_url: process.env.REACT_APP_SENSOR_URL,
app_js_bridge: true,
is_track_single_page: false,
use_client_time: true,
send_type: "beacon",
heatmap: {
clickmap: "not_collect",
scroll_notice_map: "not_collect",
},
});
sensors.registerPage({
activity_name: "NBA APP PLAY",
});
}
}
4.2 配置命令行
dotenv <other commands> 直接將根目錄下.env 結尾的文件中的變量添加到 process.env 上
dotenv -e 可以指定一些其他的.env 文件，將變量添加到 process.env 上
"scripts": {
"start": "dotenv -e .env.development craco start",
"build:prod": "dotenv -e .env.production craco build",
"build:dev": "dotenv -e .env.test craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
五、路由react router
?react-router：為 React 應用提供了路由的核心功能；
?react-router-dom：基于 react-router，加入了在瀏覽器運行環境下的一些功能。
安裝路由
要將 React Router 添加到現有項目，就需要根據使用的包管理器來安裝依賴：
// npm
npm install react-router-dom@6
// pnpm
pnpm add react-router-dom@6
// yarn
yarn add react-router-dom@6
react-router-dom中的兩種模式配置：
?BrowserRouter 是需要服務端配合, 是基于html5的pushState和replaceState的，很多瀏覽器不支持，存在兼容性問題。利用h5 Api實現路由切換.
?HashRouter 利用hash實現路由切換,是由瀏覽器端解析路由
//BrowserRouter (./router/index.tsx)
import * as React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import index from '../pages/Index/index';
export default class RouteConfig extends React.Component {
render(){
return (
<BrowserRouter basename=/pointsmall>
<Routes>
<Route path=/ element={<index/>}></Route>
</Routes>
</BrowserRouter>
)
}
}
HashRouter (./router/index.tsx)
import React, { Component } from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';
import index from '../views/Index/index';
import test from '../views/Test/index';
import result from '../views/Result/index';
export default class RouteConfig extends Component {
render(){
return (
<HashRouter>
<Routes>
<Route path=/ element={<index/>}></Route>
<Route path=/test/:id element={<test/>}></Route>
<Route path=/result element={<result/>}></Route>
</Routes> </HashRouter>
) }}
六、移動端適配
px自動轉換為vw
安裝：postcss-px-to-viewport 和 postcss-loader
npm install postcss-px-to-viewport --save-dev
yarn add -D postcss-px-to-viewport
引入插件
在craco.config.js中配置style:postcss
const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
webpack: {
alias: {
"@": resolve("src"),
},
configure: (webpackConfig, webpack) => {
// 修改輸出路徑
// webpackConfig.output.publicPath = "/play/";
// 返回修改后的webpack配置
return webpackConfig;
},
},
style: {
postcss: {
mode: "file",
},
},
};
然后工程中新建postcss.config.js文件，并配置
module.exports = {
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 需要轉換的單位，默認為"px"
viewportWidth: 375, // 設計稿的視口寬度
unitPrecision: 5, // 單位轉換后保留的精度
propList: ["*"], // 能轉化為vw的屬性列表
viewportUnit: "vw", // 希望使用的視口單位
fontViewportUnit: "vw", // 字體使用的視口單位
selectorBlackList: ["wrap"], // 需要忽略的CSS選擇器
minPixelValue: 1, // 最小的轉換數值，如果為1的話，只有大于1的值會被轉換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換，默認false
replace: true, // 是否直接更換屬性值，而不添加備用屬性
exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件
include: undefined, // 如果設置了include，那將只有匹配到的文件才會被轉換，例如只轉換 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
landscape: false, // 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
landscapeUnit: "vw", // 橫屏時使用的單位
},
},
};
VSCode插件
- Prettier - Code formatter
- TONGYI Lingma
參考
React 年度全家桶大全
react+ts【項目實戰一】配置項目/路由/redux
dotenv-cli 在項目中的使用
如何快速搞定前端屏幕尺寸兼容問題
Prettier - Code formatter配置(vscode)
