Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 升级 vite5 #222

Merged
merged 5 commits into from
Dec 14, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 0 additions & 22 deletions .eslintrc.js

This file was deleted.

2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.DS_Store
.idea
.git
.vscode
.history
.cache
.temp

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码补丁中有一些删除的行,包括.git.vscode等。这可能意味着该补丁删除了Git版本控制文件和VS Code配置文件。如果你确定这是你想要的操作,那么这部分没有问题。

另外,该补丁还添加了.DS_Store.idea.history.cache.temp等文件/文件夹。这可能是你希望将它们添加到版本控制中。请确保这些更改与你的需求相符合。

总体而言,代码补丁看起来没有明显的错误或风险。 但请记住,这只是对补丁进行的静态代码审核。为了确保补丁的正确性和功能,建议进行全面的测试和集成测试,确保没有隐藏的问题。

Expand Down
4 changes: 0 additions & 4 deletions .prettierrc.js

This file was deleted.

48 changes: 48 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -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>"
}
]
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码是对一个配置文件进行的修改,用于代码风格和规范的设置。下面是一些关键点:

  1. eslint.experimental.useFlatConfig:启用 ESLint 的 flat 配置支持。

  2. prettier.enableeditor.formatOnSave:禁用默认的代码格式化器,并使用 ESLint 进行格式化。

  3. editor.codeActionsOnSave:在保存时自动修复代码,包括运行 ESLint 的自动修复操作和不经常运行 organizeImports 操作。

  4. eslint.rules.customizations:静默掉 IDE 中的样式规则,但仍自动修复它们。将一些规则的严重性设置为 "off"。

  5. eslint.validate:设置哪些语言需要进行 ESLint 验证,包括 JavaScript、TypeScript、Vue、HTML、Markdown、JSON、YAML 等。

  6. pair-diff.patterns:设置了一组源文件和目标文件的匹配模式。

对于代码的风险和改进建议,很难在没有上下文的情况下给出具体的建议。但可以注意以下几点:

  • 确保在项目中使用了相应的 ESLint 和 Prettier 配置文件。
  • 检查自定义规则的名称是否正确且符合预期。
  • 根据项目需求确认 validate 的语言是否齐全。
  • 验证 pair-diff.patterns 中的路径是否正确并满足目标需求。

请注意,这只是对代码进行的高级概述。具体的代码质量评估需要更多的上下文信息和详细的代码分析。

2 changes: 1 addition & 1 deletion build.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = {
export default {
pkgs: [
'create-fes-app',
'fes',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以下是一段代码补丁,请帮我简要进行代码审查。欢迎指出任何错误风险和/或改进建议:

- module.exports = {
+ export default {
     pkgs: [
         'create-fes-app',
         'fes',

审查结果:
这是一个简单的代码更改,从使用CommonJS模块导出方式切换为使用ES6默认导出方式。此更改将允许您在支持ES6模块的环境中正确使用该代码。它没有明显的错误风险,并且对代码本身没有实质性的改动。这个更改看起来是合理的,符合现代JavaScript开发的趋势。

Expand Down
20 changes: 20 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -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'],
},
],
},
});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以下是您提供的代码补丁,我会为您进行简要的代码审查。欢迎指出任何潜在错误风险和改进建议:

代码中使用了以前未见过的@antfu/eslint-config模块,所以我无法给出关于这个模块是否存在问题的具体建议。您需要确保在项目中正确安装了该模块并能够正常使用。

另外,对于.config.js文件,您可以将其更改为.eslintrc.js,以更好地符合 ESLint 的命名约定。

除此之外,代码看起来没有其他明显的错误,但我无法提供更多细节,因为代码片段缺少上下文。如果您提供了更多的代码或项目信息,我将能够提供更准确的建议和审查。

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用antfu的好处是?

14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"workspaces": [
"packages/*"
],
"type": "module",
"scripts": {
"bootstrap": "pnpm i",
"dev": "node scripts/build.mjs --watch",
Expand Down Expand Up @@ -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",
Expand All @@ -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": {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁中做了几个更改和增加:

  1. 在 "workspaces" 数组中添加了 "packages/*",这可能是用于指定工作空间路径的配置。

  2. 增加了 "type" 属性并将其设置为 "module"。这是指定该项目使用 ECMAScript 模块的方式来导入和导出代码。

  3. 在 "devDependencies" 中增加了 "@antfu/eslint-config"、"eslint" 和 "simple-git-hooks" 三个模块的版本依赖。

  4. 移除了 "@webank/eslint-config-webank" 和 "husky" 两个模块的版本依赖。

  5. 替换了 "husky" 配置段为 "simple-git-hooks" 配置段,并添加了 "pre-commit" 和 "commit-msg" 的钩子配置。

对于代码本身,我没有看到明显的错误风险。改进的建议包括:

  1. 确保所有依赖的版本与实际需要的兼容。

  2. 根据项目需求,考虑添加其他必要的配置或脚本。

这些只是根据提供的补丁进行的初步分析,完整的代码审查可能需要更多上下文和详细信息。

Expand Down
115 changes: 57 additions & 58 deletions packages/fes-builder-vite/package.json
Original file line number Diff line number Diff line change
@@ -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"
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以下是代码补丁的简要代码审查:

已做的更改:

  1. 更新了一些依赖项的版本,如:

    • "@babel/core": "^7.23.3"
    • "@rollup/pluginutils": "^5.1.0"
    • "@vitejs/plugin-basic-ssl": "^1.0.2"
    • "@vitejs/plugin-legacy": "^5.2.0"
    • "@vitejs/plugin-vue": "^4.5.0"
    • "less": "^4.2.0"
    • "rollup-plugin-visualizer": "^5.9.3"
    • "terser": "^5.24.0"
    • "vite": "^5.0.3"
  2. 对"main"和"files"属性进行了重新排序。

  3. 删除了一些未使用的属性,如"type"、"access"等。

改进建议:

  1. 确保更新后的依赖项与项目的其他部分兼容,特别是在升级重要依赖项时需要进行相关测试。

  2. 验证更新后的配置是否能够正常构建和运行项目。

  3. 仔细检查更新后的依赖项是否有任何已知问题或潜在的安全漏洞,并确保采取适当的措施进行修复或防护。

请注意,我只对提供的代码片段进行了静态审查。对于真实的项目,细节可能因上下文而异,所以建议根据项目需求和实际情况进行更全面的代码审查。

10 changes: 5 additions & 5 deletions packages/fes-builder-vite/src/common/getConfig.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 || '/';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对于这段代码补丁,以下是简要的代码审核:

  1. 首先,路径引入部分从 'path''fs' 改为了 'node:path''node:fs'。这可能是因为 Node.js 模块中的路径模块和文件系统模块被移动到了 'node:path''node:fs' 中。

  2. getPostcssConfig 函数中的代码有一个小问题。当检查配置文件路径 configPath 是否存在时,缺少了大括号 {} 包裹条件执行的代码块。修复方法是在条件执行的代码块前后添加大括号。

  3. getInnerCommonConfig 函数中移除了不再使用的 serverbuilddefine 字段的解构赋值声明。现在只保留了 base 字段和其他未声明的 viteOption 字段。确保这个更改不会影响其他代码逻辑并正确传递相关选项。

总体而言,这个代码补丁主要涉及模块引入的更改和字段解构赋值的调整。修复上述提到的问题后,该补丁应该可以顺利运行。

Expand Down
8 changes: 6 additions & 2 deletions packages/fes-builder-vite/src/common/getDefine.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}, {});
console.log(formatEnv);
return {
'process.env': env,
...formatEnv,
...define,
};
};

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码主要是一个导出函数,接收两个参数:api和publicPath。它的作用是将环境变量(env)和定义(define)合并,并返回一个对象。

对于代码本身,以下是一些值得注意的地方:

  1. 在第8行到第13行,代码使用Object.keys(env).reduce方法创建了一个新的对象formatEnv,它将环境变量的值字符串化并添加了"process.env."前缀。这样做的目的可能是为了在后续使用时模拟类似于webpack中的DefinePlugin插件。这部分代码看起来没有明显的错误风险。

  2. 在第14行,代码通过console.log打印了formatEnv对象。这可能是为了调试目的而添加的临时代码,建议在生产环境中删除或注释掉这行代码。

  3. 在第16行和第18行,代码返回了一个对象,合并了formatEnvdefine。这意味着在返回的配置对象中,除了环境变量和定义外,还可以包含其他的键值对。

总的来说,这段代码的逻辑看起来是正确的,没有明显的错误风险。如果存在其他上下文或关联的代码,可能需要更多信息来提供更全面的建议。

Loading