编辑器项目搭建（一）项目初始化

技术选择

底层：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" />

之后可以看到对应图标渲染到页面中

__EOF__

本文作者：羊徒
本文链接：https://www.cnblogs.com/ayy-200248/p/18445745.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！