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)
