refactor(packages): [vite-plugin-msw] change mockServiceWorker out ex…

…tension (#146)

* perf: auto import polyfills

* feat: add publish workflow

* fix: table action click twice

* refactor(packages): [vite-plugin-msw] change mockServiceWorker out extension

.dockerignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules/
 dist/
+.vscode/
 
 npm-debug.log*
 yarn-debug.log*
@@ -15,6 +16,4 @@ tests/**/coverage/
 *.ntvs*
 *.njsproj
 *.sln
-
-# env
-.env.*
+

.env.production

@@ -3,6 +3,7 @@ ENV = 'production'
 
 # base api url
 VITE_BASE_API_URL = 'https://nest-api.buqiyuan.site'
+# VITE_BASE_API_URL = 'http://127.0.0.1:7001'
 VITE_BASE_SOCKET_PATH = '/ws-api'
 VITE_BASE_SOCKET_NSP = 'wss://nest-api.buqiyuan.site/admin'
 

.github/workflows/release-package.yml

@@ -0,0 +1,46 @@
+name: Publish Package
+
+permissions:
+  id-token: write
+  contents: write
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Use Node.js v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+          cache: pnpm
+
+      - run: pnpm install
+      - run: pnpm run --filter \"./packages/**\" build
+
+      - name: Publish
+        if: success()
+        uses: author/action-publish@stable
+        with:
+          # Optionally specify the directories to scan
+          # for modules. If this is not specified, the
+          # root directory is scanned.
+          scan: './packages'
+          # Optionally force publishing as a public
+          # module. We don't recommend setting this,
+          # unless you have a very specific use case.
+          force: true
+        env:
+          REGISTRY_TOKEN: '${{ secrets.NPM_TOKEN }}'

Dockerfile

@@ -1,31 +1,29 @@
-FROM node:lts-alpine as builder
 
-ENV PROJECT_DIR=/vue3-antdv-admin
+# https://stackoverflow.com/questions/53681522/share-variable-in-multi-stage-dockerfile-arg-before-from-not-substituted
+ARG PROJECT_DIR=/vue3-antdv-admin
 
+FROM node:20-slim as builder
+ARG PROJECT_DIR
 WORKDIR $PROJECT_DIR
 
 # 安装pnpm
 RUN npm install -g pnpm
 
+COPY . ./
 # 安装依赖
-COPY package.json $PROJECT_DIR
 # 若网络不通，可以使用淘宝源
-RUN pnpm config set registry https://registry.npmmirror.com
+# RUN pnpm config set registry https://registry.npmmirror.com
 RUN pnpm install
 
 # 构建项目
-COPY ./ $PROJECT_DIR
-RUN rm -rf .env.* && pnpm build
+ENV VITE_BASE_URL=/
+RUN pnpm build
 
 
 FROM nginx:alpine as production
+ARG PROJECT_DIR
 
-# 后端 API 端口
-ENV SERVER_PORT 7001
-# websocket 服务端口
-ENV WS_PORT 7002
-
-COPY  --from=builder /vue3-antdv-admin/dist/ /usr/share/nginx/html
-COPY ./default.conf.template /etc/nginx/templates/
+COPY --from=builder $PROJECT_DIR/dist/ /usr/share/nginx/html
+# COPY --from=builder $PROJECT_DIR/nginx.conf /etc/nginx/nginx.conf
 
 EXPOSE 80

README.md

@@ -8,7 +8,7 @@
 - 在线预览（ [gitee](http://buqiyuan.gitee.io/vue3-antdv-admin/) / [vercel](https://vue3-antdv-admin.vercel.app/) ）
 - [swagger 文档](https://nest-api.buqiyuan.site/swagger-api/)
 - [后台地址](https://github.com/buqiyuan/nest-admin)
-- [vue-cli版](https://github.com/buqiyuan/vue3-antd-admin/tree/vue-cli)
+- [vue-cli版](https://github.com/buqiyuan/vue3-antdv-admin/tree/vue-cli)
 - [gitee 地址](https://gitee.com/buqiyuan/vue3-antdv-admin)
 - 根据 JSON 生成 typescript 的工具：[http://json2ts.com/](http://json2ts.com/)
 

docker-compose.yml

@@ -1,12 +1,15 @@
 version: '3'
 
 services:
-  eoapi:
+  vue3-antdv-admin:
     # 从当前路径构建镜像
     build:
       context: .
       dockerfile: Dockerfile
       target: production
     image: buqiyuan/vue3-antdv-admin:latest
+    ports:
+      - '80:80'
     env_file:
       - .env
+      - .env.production

mocks/index.ts

@@ -1,4 +1,4 @@
-import { enableMocking } from '@admin-pkg/mock-server';
+import { enableMocking } from '@admin-pkg/vite-plugin-msw';
 import { HttpHandler } from 'msw';
 
 const modules = import.meta.glob<any>('./**/*.ts', {

package.json

@@ -17,7 +17,7 @@
     "deploy": "bash deploy.sh",
     "openapi": "npx tsx openapi.config.ts",
     "clean:cache": "npx rimraf node_modules/.cache/ && npx rimraf node_modules/.vite",
-    "clean:lib": "npx rimraf node_modules",
+    "clean:lib": "npx rimraf node_modules packages/*/node_modules",
     "format": "prettier --write .",
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 && pretty-quick --check --branch main",
     "lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json && pretty-quick --branch main",
@@ -33,12 +33,12 @@
     "test:br": "npx http-server dist --cors --brotli -c-1"
   },
   "dependencies": {
-    "@admin-pkg/mock-server": "workspace:*",
+    "@admin-pkg/vite-plugin-msw": "workspace:*",
     "@ant-design/icons-vue": "~7.0.1",
     "@iconify/vue": "^4.1.1",
     "@tinymce/tinymce-vue": "^5.1.1",
     "@vueuse/core": "~10.7.2",
-    "ant-design-vue": "~4.1.1",
+    "ant-design-vue": "~4.1.2",
     "axios": "~1.6.7",
     "dayjs": "~1.11.10",
     "echarts": "^5.4.3",
@@ -84,7 +84,7 @@
     "eslint-define-config": "~2.1.0",
     "eslint-plugin-import": "~2.29.1",
     "eslint-plugin-prettier": "~5.1.3",
-    "eslint-plugin-vue": "~9.20.1",
+    "eslint-plugin-vue": "~9.21.0",
     "husky": "~9.0.7",
     "less": "~4.2.0",
     "lightningcss": "^1.23.0",
@@ -136,7 +136,7 @@
   },
   "target": "web",
   "dependenciesMeta": {
-    "@admin-pkg/mock-server": {
+    "@admin-pkg/vite-plugin-msw": {
       "injected": true
     }
   },

packages/vite-plugin-msw/README.md

@@ -0,0 +1,99 @@
+# @admin-pkg/vite-plugin-msw
+
+Mock Service Worker browser and node integration for Vite.
+
+## Usage
+
+### Install
+
+```sh
+npm install --save-dev @admin-pkg/vite-plugin-msw
+# yarn add --dev @admin-pkg/vite-plugin-msw
+# pnpm add --save-dev @admin-pkg/vite-plugin-msw
+```
+
+### Define mocks
+
+https://mswjs.io/docs/getting-started/mocks
+
+---
+
+## Config
+
+```ts
+interface VitePluginMswOptions {
+  handlers?: RequestHandler[];
+  mode?: 'browser' | 'node';
+  build?: boolean;
+}
+```
+
+### Handlers
+
+- Optional
+
+MSW handlers. More information on how to define these: https://mswjs.io/docs/getting-started/mocks
+
+### Mode
+
+- Optional
+- Default: `browser`
+
+#### Browser
+
+To start MSW in the client, please follow the [Configure worker step](https://mswjs.io/docs/getting-started/integrate/browser#configure-worker) and [Start worker step](https://mswjs.io/docs/getting-started/integrate/browser#start-worker) in the MSW docs. The `mockServiceWorker.js` file will be provided by the Vite Dev Server.
+
+##### Example vite application
+
+```ts
+import { enableMocking } from '@admin-pkg/vite-plugin-msw';
+import { HttpHandler } from 'msw';
+
+const modules = import.meta.glob<any>('./**/*.ts', {
+  eager: true,
+});
+
+export const setupMock = async () => {
+  const handlers = Object.values(modules).reduce<HttpHandler[]>((prev, curr) => {
+    const arr = curr?.default;
+    if (Array.isArray(arr)) {
+      arr.forEach((item) => {
+        if (item instanceof HttpHandler) {
+          prev.push(item);
+        }
+      });
+    }
+    return prev;
+  }, []);
+  // console.log('handlers', handlers);
+  await enableMocking(handlers);
+};
+```
+
+#### Node
+
+This will handle the mocked service worker handlers via a Vite Dev Server plugin.
+
+##### Add to Vite config
+
+```ts
+// Import plugin
+import msw from '@admin-pkg/vite-plugin-msw';
+
+// Import msw handlers
+import { handlers } from '../mocks/handlers';
+
+// Pass them to plugin
+export default defineConfig({
+  plugins: [msw({ handlers })],
+});
+```
+
+### Build
+
+- Optional
+- Default: `false`
+
+A true value will output MSW's `mockServiceWorker.js` file to the Vite build directory, in case if MSW is needed in production.
+
+---