网站制作软件手机,昆明做网站公司,网店商品页面制作加工,国家工商局企业查询系统官网1、用vite搭建项目
使用npm create vitelatest构建项目#xff0c;配置项选项react-tsSWC即可。
让后打开项目npm i。
2、项目配置
2.1、vite配置
主要是配置用到的插件#xff08;plugins--比如#xff1a;svg、mock等#xff09;、路径、环境变量的使用、打包、…1、用vite搭建项目
使用npm create vitelatest构建项目配置项选项react-tsSWC即可。
让后打开项目npm i。
2、项目配置
2.1、vite配置
主要是配置用到的插件plugins--比如svg、mock等、路径、环境变量的使用、打包、路径重写等操作。
// 导入React插件使用Swc作为JSX到JS的转换器提高构建速度
import react from vitejs/plugin-react-swc
// 导入Vite的类型定义用于类型安全的配置
import type { ConfigEnv, UserConfig } from vite
// 导入Vite的环境变量加载函数
import { loadEnv } from vite
// 导入自定义的环境变量处理函数
import { wrapperEnv } from ./scripts/utils
// 导入SVG图标插件
import { createSvgIconsPlugin } from vite-plugin-svg-icons
// 导入Vite的模拟请求插件
import { viteMockServe } from vite-plugin-mock
// 导入Node.js的路径解析模块
import { resolve } from path// 定义并导出配置函数接收命令和模式参数返回用户配置对象
export default({command, mode}: ConfigEnv): UserConfig {// 获取项目根目录的绝对路径const root process.cwd()// 判断当前命令是否为构建命令const isBuild command build// 根据模式加载环境变量const env loadEnv(mode, root)// 使用自定义函数处理环境变量可能包括类型转换或逻辑处理const viteEnv: any wrapperEnv(env)// 解构赋值从处理后的环境变量中提取端口号和控制台日志开关const { VITE_PORT, VITE_DROP_CONSOLE } viteEnv// 返回配置对象return {// 部署路径空字符串意味着部署在根目录base : ,// 服务器配置server: {// 监听所有网络接口host: 0.0.0.0,// 设置服务器端口port: VITE_PORT,// 启动服务器时自动打开浏览器open: true,// 关闭HTTPShttps: false,// 代理配置此处未配置代理规则proxy: {},},// 插件配置plugins: [// 启用React插件react(),// 配置SVG图标插件createSvgIconsPlugin({// 指定图标目录iconDirs: [resolve(process.cwd(), src/assets/icons)],// 设置生成的SVG图标ID前缀symbolId: icon-[dir]-[name]}),// 配置模拟请求插件viteMockServe({// 模拟数据目录mockPath: mock,// 忽略以_开头的文件ignore: /^_/,// 开发环境启用模拟数据localEnabled: !isBuild,// 生产环境启用模拟数据prodEnabled: isBuild,// 注入代码用于初始化生产环境的模拟数据injectCode: import { setupProdMockServer } from mock/_createProductionServer;setupProdMockServer()})],// 构建配置build: {// 设置目标ES版本target: es2015,// 设置CSS兼容性目标cssTarget: chrome86,// 使用Terser进行代码压缩minify: terser,// Terser的配置选项terserOptions: {// 压缩选项compress: {// 保留Infinity关键字keep_infinity: true,// 生产环境删除控制台日志drop_console: VITE_DROP_CONSOLE}},// 设置警告的代码块大小限制chunkSizeWarningLimit: 2000},// 路径别名配置resolve: {// 设置别名指向src目录alias: {: resolve(__dirname, ./src)}}}
}utils.js
declare type RecordableT any Recordstring, Tinterface ViteEnv {VITE_PORT: numberVITE_PROXY: [string, string][]VITE_DROP_CONSOLE: boolean
}// read all environment variable configuration files to process.env
export function wrapperEnv(envConf: Recordable): ViteEnv {const result: any {}for (const envName of Object.keys(envConf)) {let realName envConf[envName].replace(/\\n/g, \n)realName realName true ? true : realName false ? false : realNameif (envName VITE_PORT) {realName Number(realName)}if (envName VITE_PROXY realName) {try {realName JSON.parse(realName.replace(//g, ))} catch (error) {realName }}result[envName] realNameif (typeof realName string) {process.env[envName] realName} else if (typeof realName object) {process.env[envName] JSON.stringify(realName)}}return result
}2.2、eslintprettier代码检测
在json配置文件中的scripts执行操作下添加 lint:eslint: eslint --cache \{src,mock,build}/**/*.{js,ts,tsx}\ --fix, lint:prettier: prettier --write \src/**/*.{js,json,ts,tsx,css,less,html,md}\, 2.2.1、eslint 用到的库 eslint: ^8.56.0, eslint-config-prettier: ^9.0.0, eslint-define-config: ^2.1.0, eslint-plugin-prettier: ^5.0.1, eslint-plugin-react: ^7.33.2, eslint-plugin-react-hooks: ^4.6.0, vite-plugin-eslint: ^1.8.1, eslint.config.js配置文件--文件是 ESLint 的配置文件之一它以 JavaScript 文件的形式存在用于定义 ESLint 的配置规则。在早期版本的 ESLint 中配置文件可能被命名为 .eslintrc、.eslintrc.json 或 .eslintrc.yml 等但在 ESLint 8.0.0 版本之后默认推荐使用 eslint.config.{js,cjs,mjs} 这样的命名方式
// 配置文档: https://eslint.nodejs.cn/
import { defineFlatConfig } from eslint-define-config
import configPrettier from eslint-config-prettier
import pluginPrettier from eslint-plugin-prettier
import * as parserTypeScript from typescript-eslint/parser
import pluginTypeScript from typescript-eslint/eslint-plugin
import js from eslint/js/** type {import(eslint-define-config).FlatESLintConfig} */
export default defineFlatConfig([{...js.configs.recommended,ignores: [src/assets/**],plugins: {prettier: pluginPrettier},rules: {...configPrettier.rules,...pluginPrettier.configs.recommended.rules,/** Eslint规则配置* 配置文档: https://eslint.nodejs.cn/docs/latest/rules/*/// 需要 let 或 const 而不是 varno-var: error,// 禁止在定义变量之前使用变量no-use-before-define: off,// 声明后永远不会重新分配的变量需要 const 声明prefer-const: error,// 禁止不规则空格no-irregular-whitespace: off,// 禁止使用 debuggerno-debugger: off,// 禁止未使用的变量no-unused-vars: [error,{argsIgnorePattern: ^_,varsIgnorePattern: ^_}],// 使用 prettier 插件prettier/prettier: [error,{endOfLine: auto}]}},{files: [**/*.?([cm])ts, **/*.?([cm])tsx],languageOptions: {parser: parserTypeScript,parserOptions: {ecmaVersion: 2020,sourceType: module,jsxPragma: React,ecmaFeatures: {jsx: true}},},plugins: {typescript-eslint: pluginTypeScript},rules: {...pluginTypeScript.configs.recommended.rules,/** TypeScript规则配置* 配置文档: https://typescript-eslint.nodejs.cn/rules/)*/// 根据参数、属性和变量的默认值或初始值推断其类型typescript-eslint/no-inferrable-types: off,// 禁止使用自定义 ts 模块和命名空间typescript-eslint/no-namespace: off,// 禁止使用 any 类型typescript-eslint/no-explicit-any: off,// 禁止使用特定类型typescript-eslint/ban-types: off,// 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式返回类型声明typescript-eslint/explicit-function-return-type: off,// 不允许在 import 语句中使用 require 语句typescript-eslint/no-var-requires: off,// 禁止空函数typescript-eslint/no-empty-function: off,// 禁止在变量定义之前使用它们typescript-eslint/no-use-before-define: off,// 禁止 ts-directive 注释代码typescript-eslint/ban-ts-comment: off,// 不允许使用后缀运算符的非空断言(!)typescript-eslint/no-non-null-assertion: off,// 要求导出函数和类的公共类方法的显式返回和参数类型typescript-eslint/explicit-module-boundary-types: off,// 使用顶层 type 限定符进行导入typescript-eslint/no-import-type-side-effects: error,// 不允许在可选链表达式后使用非空断言typescript-eslint/no-non-null-asserted-optional-chain: off,// 禁止定义未使用的变量typescript-eslint/no-unused-vars: [warn,{argsIgnorePattern: ^_,varsIgnorePattern: ^_}],// 允许在导入上指定 type 关键字typescript-eslint/consistent-type-imports: [error,{disallowTypeAnnotations: false,fixStyle: inline-type-imports}],// 允许枚举成员的值是多种不同类型的有效 js 表达式typescript-eslint/prefer-literal-enum-member: [error,{allowBitwiseExpressions: true}]}},{files: [*.d.ts],rules: {eslint-comments/no-unlimited-disable: off,import/no-duplicates: off,unused-imports/no-unused-vars: off}},{files: [*.?([cm])js],rules: {typescript-eslint/no-require-imports: off,typescript-eslint/no-var-requires: off}}
])// export default {
// root: true,
// env: {
// browser: true,
// node: true,
// es6: true
// },
// settings: {
// react: {
// version: detect
// }
// },
// // 指定如何解析语法
// parser: typescript-eslint/parser,
// // 优先级低于 parse 的语法解析配置
// parserOptions: {
// ecmaVersion: 7,
// sourceType: module,
// jsxPragma: React,
// ecmaFeatures: {
// jsx: true
// }
// },
// plugins: [react, typescript-eslint, react-hooks, prettier],
// // 继承某些已有的规则
// extends: [
// eslint:recommended,
// plugin:react/recommended,
// plugin:typescript-eslint/recommended,
// plugin:react/jsx-runtime,
// plugin:react-hooks/recommended,
// prettier,
// plugin:prettier/recommended
// ],
// /*
// * off 或 0 关闭规则
// * warn 或 1 规则提示为警告不影响代码执行
// * error 或 2 规则提示为错误代码不能执行界面报错
// */
// rules: {
// /*
// * Eslint规则配置
// * 配置文档: https://eslint.nodejs.cn/docs/latest/rules/
// */
// // 需要 let 或 const 而不是 var
// no-var: error,
// // 禁止在定义变量之前使用变量
// no-use-before-define: off,
// // 声明后永远不会重新分配的变量需要 const 声明
// prefer-const: error,
// // 禁止不规则空格
// no-irregular-whitespace: off,
// // 禁止使用 debugger
// no-debugger: off,
// // 禁止未使用的变量
// no-unused-vars: [
// error,
// {
// argsIgnorePattern: ^_,
// varsIgnorePattern: ^_
// }
// ],
// // 使用 prettier 插件
// prettier/prettier: [
// error,
// {
// endOfLine: auto
// }
// ],// /*
// * TypeScript规则配置
// * 配置文档: https://typescript-eslint.nodejs.cn/rules/)
// */
// // 根据参数、属性和变量的默认值或初始值推断其类型
// typescript-eslint/no-inferrable-types: off,
// // 禁止使用自定义 ts 模块和命名空间
// typescript-eslint/no-namespace: off,
// // 禁止使用 any 类型
// typescript-eslint/no-explicit-any: off,
// // 禁止使用特定类型
// typescript-eslint/ban-types: off,
// // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式返回类型声明
// typescript-eslint/explicit-function-return-type: off,
// // 不允许在 import 语句中使用 require 语句
// typescript-eslint/no-var-requires: off,
// // 禁止空函数
// typescript-eslint/no-empty-function: off,
// // 禁止在变量定义之前使用它们
// typescript-eslint/no-use-before-define: off,
// // 禁止 ts-directive 注释代码
// typescript-eslint/ban-ts-comment: off,
// // 不允许使用后缀运算符的非空断言(!)
// typescript-eslint/no-non-null-assertion: off,
// // 要求导出函数和类的公共类方法的显式返回和参数类型
// typescript-eslint/explicit-module-boundary-types: off,
// // 使用顶层 type 限定符进行导入
// typescript-eslint/no-import-type-side-effects: error,
// // 禁止定义未使用的变量
// typescript-eslint/no-unused-vars: [
// error,
// {
// argsIgnorePattern: ^_,
// varsIgnorePattern: ^_
// }
// ],
// // 允许在导入上指定 type 关键字
// typescript-eslint/consistent-type-imports: [
// error,
// {
// disallowTypeAnnotations: false,
// fixStyle: inline-type-imports
// }
// ],
// // 允许枚举成员的值是多种不同类型的有效 js 表达式
// typescript-eslint/prefer-literal-enum-member: [
// error,
// {
// allowBitwiseExpressions: true
// }
// ],// react-hooks/rules-of-hooks: off,
// react-hooks/exhaustive-deps: off
// }
// }.eslintignore配置--用于指定 ESLint 应该忽略不进行 lint 检查的文件或目录
.vscode
.idea
.husky
.local/public
/docs
/src/assets
dist
node_modules
pnpm-lock.yaml
Dockerfileeslint.config.js
postcss.config.js
prettier.config.js
commitlint.config.js*.md
*.woff
*.ttf2.2.1、prettier
用到的插件 eslint-config-prettier: ^9.0.0, eslint-plugin-prettier: ^5.0.1, prettier: ^3.1.0, prettier.config.js配置文件
// 配置文档: https://prettier.nodejs.cn//** type {import(prettier).Config} */
export default {// 每行最大宽度超过换行printWidth: 120,// 缩进级别的空格数tabWidth: 2,// 用制表符而不是空格缩进行useTabs: false,// 语句末尾用分号semi: false,// 使用单引号而不是双引号singleQuote: true,// 在 JSX 中使用单引号而不是双引号jsxSingleQuote: true,// 尾随逗号trailingComma: none,// 对象字面量中括号之间有空格 { foo: bar }bracketSpacing: true,// 将多行 HTMLHTML、JSX元素的 放在最后一行的末尾而不是单独放在下一行bracketSameLine: false,// 在唯一的箭头函数参数周围包含括号(avoid省略括号, always不省略括号)arrowParens: avoid,// 换行符使用 lf 结尾 可选值 auto|lf|crlf|crendOfLine: lf
}.prettierignore配置文件
/dist/*
/public/*
/node_modules/**.local
**/*.svgeslint.config.js
postcss.config.js
prettier.config.js
commitlint.config.js
2.3、husky
作为提交的代码检测工具
配置如下
执行文件 prepare: husky install 安装包 husky: ^8.0.3, 安装过后执行prepare就行了会生成husky文件。
3、开发配置
3.1、axios二次封装
/utils/axios
import type { InternalAxiosRequestConfig, AxiosResponse, AxiosError } from axios
import axios from axios
import { message } from antd
import { getToken, clearAuthCache } from /utils/auth// Create axios instance
const service axios.create({baseURL: /api,timeout: 10 * 1000
})// Handle Error
const handleError (error: AxiosError): PromiseAxiosError {if (error.response?.status 401 || error.response?.status 504) {//登录失效这里自己处理clearAuthCache()location.href /login}message.error(error.message || error)return Promise.reject(error)
}// Request interceptors configuration
service.interceptors.request.use((config: InternalAxiosRequestConfig) {const token getToken()if (token) {;(config as Recordable).headers[Authorization] ${token}};(config as Recordable).headers[Content-Type] application/jsonreturn config
}, handleError)// Respose interceptors configuration
service.interceptors.response.use((response: AxiosResponse) {const data response.dataif (data.code 0) {return data.data} else {message.error(data.message)return Promise.reject(error)}
}, handleError)export { service }3.2、包安装
根据项目而定需要什么包可以提前规划好初始化项目
3.3、配置所需要挂载的包
在main里面
import React from react
import ReactDOM from react-dom/client
import { Provider } from react-redux
import { PersistGate } from redux-persist/integration/react
import { store, persistor } from ./stores
import App from ./App
import /design/index.less// register svg icon
import virtual:svg-icons-registerReactDOM.createRoot(document.getElementById(root) as HTMLElement).render(React.StrictModeProvider store{store}PersistGate persistor{persistor}App //PersistGate/Provider/React.StrictMode
)3.4、配置env
这里配置的env还有.env.development、.env.production都可以配置根据需要而定。
.env
VITE_GLOB_APP_TITLE react-admin-designVITE_PORT 8203VITE_BUILD_GZIP falseVITE_DROP_CONSOLE true
3.5、mook配置
安装mookjs
一个是mock数据的一个是挂载vite的 mockjs: ^1.1.0,vite-plugin-mock: 2.9.8,
在vite的plugins里面添加如下
里面包含mock路径一般跟src同级 viteMockServe({mockPath: mock,ignore: /^_/,localEnabled: !isBuild,prodEnabled: isBuild,injectCode: import { setupProdMockServer } from mock/_createProductionServer;setupProdMockServer()})
具体的使用去仓库看https://github.com/goodkets/react-admin-design
大概配置就是这样还有很多大项目的配置肯定不止如此比如多语言、测试工具、打包优化、包管理限制等啥的我这里只用到了基本项目的配置。
