feat: 升级 vite5 (#222)

* feat: 升级 vite5 * fix: 优化 webpack publicPath * fix: 优化文档 * chore: remove log * chore: remove 无效代码
WeBankFinTech · Dec 14, 2023 · fec7a8f · fec7a8f
1 parent fb54913
commit fec7a8f
Show file tree

Hide file tree

Showing 33 changed files with 3,294 additions and 1,231 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,5 @@
 .DS_Store
 .idea
-.git
-.vscode
 .history
 .cache
 .temp

diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,48 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+
+  "pair-diff.patterns": [
+    {
+      "source": "./fixtures/output/**/*.*",
+      "target": "./fixtures/input/<base>"
+    }
+  ]
+}
diff --git a/build.config.js b/build.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     pkgs: [
         'create-fes-app',
         'fes',

diff --git a/docs/guide/upgrade3.md b/docs/guide/upgrade3.md
@@ -4,11 +4,14 @@
 
 1. 编译时的 [base](../reference/config/index.md/#base) 配置，移到了 [router.base](../reference/config/index.md/#router) 下。
 2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。
+3. [layout 插件](../reference/plugin/plugins/layout.md#_4-x-升级到-5-x) 有一些属性变更
+3. [request 插件](../reference/plugin/plugins/request.md#_2-x-升级到-3-x) 有一些参数变更
 
 ## 继续使用 Webpack
 
 1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`。
-2. 如果有，将 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
+2. 如果设置了 `publicPath: './'`，请更改为 `publicPath: ''`
+3. 如果有，将 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
 
 ## 换成 Vite
 

diff --git a/docs/reference/plugin/plugins/request.md b/docs/reference/plugin/plugins/request.md
@@ -31,12 +31,12 @@ export default defineRuntimeConfig({
         dataHandler(data, response) {
             // 处理响应内容异常
             if (data.code !== '0') {
-                if (data.code === '10000') {
+                if (data.code === '10000')
                     FMesseage.error('hello world');
-                }
-                if (data.code === '20000') {
+
+                if (data.code === '20000')
                     FMesseage.error('hello world');
-                }
+
                 throw new Error(response);
             }
             // 响应数据格式化
@@ -49,15 +49,18 @@ export default defineRuntimeConfig({
                 console.log(error.response.data);
                 console.log(error.response.status);
                 console.log(error.response.headers);
-            } else if (error.request) {
+            }
+            else if (error.request) {
                 // 请求已经成功发起，但没有收到响应
                 // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
                 // 而在node.js中是 http.ClientRequest 的实例
                 console.log(error.request);
-            } else if (error.type) {
+            }
+            else if (error.type) {
                 // 插件异常
                 console.log(error.msg);
-            } else {
+            }
+            else {
                 // 发送请求时出了点问题
                 console.log('Error', error.message);
             }
@@ -192,4 +195,4 @@ export default {
 1. 删除 dataField 配置，通过 dataHandler 实现类似功能，详情看上文案例
 2. errorHandler 改成了函数了，异常处理逻辑，查看上文案例
 3. 废弃 base 参数，用 baseURL
-4. 移除 skipErrorHandler 参数，直接传 errorHandler 可覆盖默认 errorHandler
+4. 移除 skipErrorHandler 参数，目前还做了兼容，最好用 dataHandler 和 errorHandler 代替
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,20 @@
+// eslint.config.js
+import antfu from '@antfu/eslint-config';
+
+export default await antfu({
+    stylistic: {
+        indent: 4, // 4, or 'tab'
+        quotes: 'single', // or 'double'
+        semi: 'always',
+    },
+    typescript: true,
+    vue: true,
+    rules: {
+        'vue/block-order': [
+            'error',
+            {
+                order: ['template', 'script', 'style'],
+            },
+        ],
+    },
+});
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "workspaces": [
     "packages/*"
   ],
+  "type": "module",
   "scripts": {
     "bootstrap": "pnpm i",
     "dev": "node scripts/build.mjs --watch",
@@ -37,16 +38,17 @@
     "semver": "^7.3.6"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^2.1.1",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@webank/eslint-config-webank": "1.2.7",
     "chokidar": "^3.5.3",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "deepmerge": "^4.2.2",
+    "eslint": "^8.54.0",
     "fs-extra": "^11.1.1",
-    "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
+    "simple-git-hooks": "^2.9.0",
     "typescript": "^5.0.4",
     "vitepress": "1.0.0-alpha.73",
     "vue": "^3.3.4",
@@ -57,11 +59,9 @@
       "npm run lint"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
+  "simple-git-hooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
   },
   "config": {
     "commitizen": {

diff --git a/packages/fes-builder-vite/package.json b/packages/fes-builder-vite/package.json
@@ -1,60 +1,59 @@
 {
-  "name": "@fesjs/builder-vite",
-  "version": "3.0.4",
-  "description": "@fesjs/builder-vite",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-builder-vite"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@babel/core": "^7.21.3",
-    "@fesjs/utils": "^3.0.1",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-legacy": "^3.0.1",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "autoprefixer": "^10.4.4",
-    "babel-plugin-polyfill-corejs3": "^0.7.1",
-    "less": "^4.1.2",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-safe-parser": "^6.0.0",
-    "rollup-plugin-visualizer": "^5.6.0",
-    "terser": "^5.16.8",
-    "vite": "^4.2.1",
-    "@rollup/pluginutils": "^4.2.0",
-    "colorette": "^2.0.16",
-    "connect-history-api-fallback": "^2.0.0",
-    "consola": "^2.15.3",
-    "dotenv": "^16.0.0",
-    "dotenv-expand": "^8.0.2",
-    "ejs": "^3.1.6",
-    "fast-glob": "^3.2.11",
-    "fs-extra": "^10.0.1",
-    "html-minifier-terser": "^6.1.0",
-    "node-html-parser": "^5.3.3",
-    "pathe": "^0.2.0"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "core-js": "^3.29.1"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/builder-vite",
+    "version": "3.0.4",
+    "description": "@fesjs/builder-vite",
+    "author": "qlin",
+    "license": "MIT",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-builder-vite"
+    },
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.4",
+        "core-js": "^3.29.1"
+    },
+    "dependencies": {
+        "@babel/core": "^7.23.3",
+        "@fesjs/utils": "^3.0.1",
+        "@rollup/pluginutils": "^5.1.0",
+        "@vitejs/plugin-basic-ssl": "^1.0.2",
+        "@vitejs/plugin-legacy": "^5.2.0",
+        "@vitejs/plugin-vue": "^4.5.0",
+        "@vitejs/plugin-vue-jsx": "^3.1.0",
+        "autoprefixer": "^10.4.4",
+        "colorette": "^2.0.16",
+        "connect-history-api-fallback": "^2.0.0",
+        "consola": "^2.15.3",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^8.0.2",
+        "ejs": "^3.1.6",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^10.0.1",
+        "html-minifier-terser": "^6.1.0",
+        "less": "^4.2.0",
+        "node-html-parser": "^5.3.3",
+        "pathe": "^0.2.0",
+        "postcss-flexbugs-fixes": "^5.0.2",
+        "postcss-safe-parser": "^6.0.0",
+        "rollup-plugin-visualizer": "^5.9.3",
+        "terser": "^5.24.0",
+        "vite": "^5.0.3"
+    },
+    "typings": "./types.d.ts"
 }
diff --git a/packages/fes-builder-vite/src/common/getConfig.js b/packages/fes-builder-vite/src/common/getConfig.js
@@ -1,5 +1,5 @@
-import { join } from 'path';
-import { existsSync } from 'fs';
+import { join } from 'node:path';
+import { existsSync } from 'node:fs';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { createHtmlPlugin } from './vite-plugin-html';
@@ -9,15 +9,15 @@ import getDefine from './getDefine';
 function getPostcssConfig(api) {
     // TODO 支持其他 postcss 配置文件类型
     const configPath = `${api.paths.cwd}/postcss.config.js`;
-    if (existsSync(configPath)) {
+    if (existsSync(configPath))
         return require(`${api.paths.cwd}/postcss.config.js`);
-    }
+
     return {};
 }
 
 export function getInnerCommonConfig(api) {
     const { deepmerge, resolveRuntimeEnv } = api.utils;
-    const { server, build, define, base, ...otherViteOption } = api.config.viteOption;
+    const { base, ...otherViteOption } = api.config.viteOption;
 
     const publicPath = base || api.config.publicPath || '/';
 

diff --git a/packages/fes-builder-vite/src/common/getDefine.js b/packages/fes-builder-vite/src/common/getDefine.js
@@ -8,9 +8,13 @@ export default (api, publicPath) => {
         ...api.config.define,
         ...viteOption.define,
     });
+    const formatEnv = Object.keys(env).reduce((acc, cur) => {
+        acc[`process.env.${cur}`] = JSON.stringify(env[cur]);
+        return acc;
+    }, {});
 
     return {
-        'process.env': env,
+        ...formatEnv,
         ...define,
     };
 };