feat: 引入vite-react-app项目作为常用的后台方案

apps/admin/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@backset/ui": "workspace:^1.0.0",
     "antd": "^5.2.0",
     "less": "^4.1.3",
     "react": "^18.2.0",
@@ -20,6 +21,7 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-router-dom": "5.3.3",
     "@vitejs/plugin-react": "^3.1.0",
+    "vite-tsconfig-paths": "4.0.5",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"
   }

apps/admin/src/view/Home/index.tsx

@@ -1,8 +1,14 @@
 import { Button, message } from "antd";
+import { useArticle } from "@backset/ui";
+import { useMount } from "../../hooks";
 
 export default function Index() {
+  useMount(() => {
+    console.log(useArticle());
+  });
+
   const onClick = () => {
-    message.info("hi");
+    message.info(`hi, 很惆怅啊, vite 哪里又有坑哦`);
   };
   return (
     <div>

apps/admin/vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), tsconfigPaths()],
+});

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev:apps-server": "cd apps/server && pnpm start:dev"
+    "dev:apps-server": "cd apps/server && pnpm start:dev",
+    "dev:apps-admin": "cd apps/admin && pnpm dev"
   },
   "keywords": [],
   "author": "",

packages/util/package.json

@@ -6,7 +6,5 @@
   "scripts": {
     "build": "rimraf ./dist && tsc -p ./tsconfig.build.json"
   },
-  "devDependencies": {
-    "md5.js": "1.3.5"
-  }
+  "devDependencies": {}
 }

readme.md

@@ -128,6 +128,21 @@ webpack 负责构建，根据 esmodule、commonjs 规范，找到对应的依赖
 
 esbuild 同 webpack 一样，速度更快，但是 production 稳定性待考究
 
+# 坑点
+
+## vite 项目引包报错
+
+能够直接读取 tsconfig.json 并使用同样的路径解析方式。用这个插件替换掉上面的 alias 配置就能保证路径解析规则在 vite 和 create-react-app 环境中保持一致。
+
+```js
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+});
+```
+
 # 待解决的问题
 
 ## 自动化编译构建依赖

tsconfig.json

@@ -4,7 +4,7 @@
     "strictNullChecks": true,
     "baseUrl": ".",
     "paths": {
-      "@demo/*": [
+      "@backset/*": [
         "packages/*/src" // packages/*/src/index.ts 作为入口文件常规操作
       ]
     }