编辑器项目搭建（一）项目初始化
技术选择
底层：Vite（设计维护都较友好）+React+Ts（项目越来越大并复杂，需标记变量类型，有助于项目管理）
路由：React Router
状态管理：Zustand
UI：AntD
其他：iconfont+less+axios+Immer+loadash+react-color
创建一个项目
用vite开一个Reate TS项目
pnpm create vite Flavor --template reate-ts
在vite官网：https://vitejs.cn/vite3-cn/guide/#trying-vite-online
注：在VSCode中的终端（需要先安装node以及pnpm相关），之后在自定义目录下创建项目：
相关命令如下
npm config set registry https://registry.npmmirror.com --npm包下载源
fnm env --输出当前node环境配置
npm install -g pnpm@latest --安装js包管理工具
pnpm run build --执行项目中定义的构建过程
pnpm run generate --执行在项目中定义的生成过程
fnm env --use-on-cd --shell power-shell | Out-String | Invoke-Expression
--配置 fnm 使其在当前 PowerShell 会话中有效，并确保在切换到包含 .nvmrc 或 .node-version 文件的目录时，自动使用该文件中指定的 Node.js 版本
pnpm create vite Flavor --template react-ts --此操作前请先切换到项目预设路径下
创建成功打印如下：
对应项目文件夹Flavor打开：
此处项目暂时未启用pnpm导致依赖不到相关的js包，此时：
之后对项目中某些内容进行精简，如main.tsx，原本样式
注意此处需要安装immer
修改后代码如下
main.tsx
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import "antd/dist/reset.css"
// 在你的应用程序入口文件
import {enableMapSet} from "immer"
enableMapSet();
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<App />
)
同时需要引入：pnpm add antd
之后启动项目
界面如下所示
配置文件tsconfig.json
tsconfig.json
{
"compilerOptions": {
"allowUmdGlobalAccess":true,
"allowImportingTsExtensions": true,
"useDefineForClassFields":true,
"lib":["DOM","DOM.Iterable","ESNext"],
"skipLibCheck":true,
"esModuleInterop":false,
"allowSyntheticDefaultImports":true,
"strict": true,
"forceConsistentCasingInFileNames":true,
"module": "ESNext",
"moduleResolution":"Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"allowJs": false,
"target": "ESNext",
"paths":{
"src/*":["./src/*"]
}
},
"include": ["src","**/*.ts","**/*.tsx"],
"references":[{"path":"./tsconfig.node.json"}]
}
解释：
- "allowUmdGlobalAccess": true: 允许在模块中访问 UMD 全局变量，对于使用一些第三方库很有帮助。
- "allowImportingTsExtensions": true: 允许在导入语句中使用 TypeScript 文件扩展名。
- "useDefineForClassFields": true: 对于类字段使用 defineProperty 而不是简单的赋值，提高代码的兼容性。
- "lib": ["DOM", "DOM.Iterable", "ESNext"]: 指定要包含在编译中 JavaScript 语言功能和浏览器 API。
- "skipLibCheck": true: 跳过对所有声明文件的类型检查。这可以加快编译速度。
- "esModuleInterop": false: 禁用 ES 模块与 CommonJS 模块的自动互通。
- "allowSyntheticDefaultImports": true: 允许从没有默认导出的模块中进行默认导入。
- "strict": true: 启用所有严格类型检查选项。
- "forceConsistentCasingInFileNames": true: 强制在导入/require语句中使用一致的大小写。
- "module": "ESNext": 指定生成代码的模块系统为 ECMAScript 下一个版本。
- "moduleResolution": "Node": 指定模块解析策略为 Node.js 模块解析。
- "resolveJsonModule": true: 允许导入 JSON 文件。
- "isolatedModules": true: 确保每个文件都可以独立编译(用于 Babel 等工具)。
- "noEmit": true: 不生成输出文件,仅进行类型检查。
- "jsx": "react": 指定 JSX 代码的生成方式为 React 风格。
- "allowJs": false: 不允许编译 JavaScript 文件。
- "target": "ESNext": 指定生成代码的 ECMAScript 目标版本为最新版本。
- "paths": { "src/": ["./src/"] }: 设置模块解析时的路径映射,将 src/* 映射到 ./src/*。
- "include": ["src", "/*.ts", "/*.tsx"]: 指定要编译的文件包括 src 目录下的所有 TypeScript 和 TSX 文件。
对应的tsconfig.node.json:
tsconfig.node.json
{
"compilerOptions": {
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": false,
"composite": true,
"declaration": true,
"declarationMap": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["vite.config.ts"]
}
之后配置vite.config.ts文件，其中vite-tsconfig-paths也需要引入：
pnpm install vite-tsconfig-paths
代码如下
vite.config.ts
import { defineConfig } from 'vite'
import tsconfigPaths from "vite-tsconfig-paths"
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
server:{
proxy:{
"/api":"http://template.josephxia.com"
}
},
plugins: [tsconfigPaths(),react()],
css:{
modules:{
hashPrefix: "prefix"
},
preprocessorOptions: {
less: {
javascriptEnabled: true
}
}
}
})
之后引入iconfront，打开阿里矢量，下载图标
解压后放在public路径下
在index.html下添加代码
<link rel="stylesheet" href="./public/iconfront/iconfont.css" />
之后可以看到对应图标渲染到页面中
