尧图网站建设 
Vant CLI 版本演进全解析从 Webpack 到 Rsbuild 的 Vue 组件库构建工具变革路线图【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vantVant CLIvant/cli是 Vant 组件库开箱自带的构建工具用于快速搭建一套功能完备的 Vue 组件库涵盖本地开发、单元测试、构建发布、文档站点生成等全流程。本文以仓库内 packages/vant-cli/changelog.md 的更新记录为骨架结合 cli.ts、package.json、config.zh-CN.md 等源码与配置完整梳理 v2.x → v7.x 六个大版本的技术变迁帮助你理解 Vant CLI 的设计取舍、掌握版本迁移要点并在遇到问题时快速定位对应版本的行为差异。Vant CLI 是什么根据 README.zh-CN.md 的定义Vant CLI 是一个基于 Rsbuild 实现的 Vue 组件库构建工具通过它可以快速搭建一套功能完备的 Vue 组件库。其核心特性包括基于 Rsbuild 实现享受愉悦的开发体验提供丰富命令涵盖从开发测试到构建发布的完整流程基于约定的目录结构自动生成优雅的文档站点和组件示例构建后的组件库默认支持按需引入、主题定制、Tree Shaking。当前仓库中vant/cli的版本为7.1.0见 package.json。安装方式如下# 通过 npm npm i vant/cli -D # 通过 yarn yarn add vant/cli -D # 通过 pnpm pnpm add vant/cli -D # 通过 Bun bun add vant/cli -D也可以直接执行yarn create vant-cli-app快速创建一个基于 Vant CLI 的项目脚手架对应仓库中的 packages/create-vant-cli-app。版本演进全景六代技术栈的更迭从 changelog.md 的记录看Vant CLI 自 2020 年初v2.1.x到 2024 年 9 月v7.1.0经历了多轮构建技术栈换代核心脉络可以概括为大版本发布时间技术栈基线里程碑事件v2.x2020Webpack 4 / Vue 2引入 create-vant-cli-app、scoped 样式编译、web-types 定义生成v3.x2020-11Webpack 5 / Vue 3全面升级 Vue 3、支持 PC 端组件预览v4.x2022-02Vite 2 esbuild移除全部 webpack 依赖配置文件改为 ESModulev5.x2022-10Vite 3 / jest 29精简 gh-pages、stylelint 依赖切换 volar 生态v6.x2023-02Vite 4 / TS 5移除site.searchConfig动态 import 后缀替换v7.x2024-04Rsbuild构建站点切换 Rsbuild移除 test/changelog 命令下面按里程碑拆解每个大版本的技术决策与 breaking changes。v2 → v3从 Vue 2 迈向 Vue 3 的过渡期v2.x功能奠基v2 系列为 Vant CLI 奠定了核心能力几个关键节点v2.1.82020-01-19新增create-vant-cli-app初始化命令与--version选项——这也是仓库中 packages/create-vant-cli-app 脚手架的直接来源v2.3.02020-03-25build命令支持编译 scoped 样式并支持生成 WebStorm 组件定义文件web-typesclean命令由清空文件夹改为移除文件夹v2.5.02020-05-27开启fork-ts-checker-webpack-plugin在编译时进行类型检查v2.7.02020-12-03支持通过site.htmlPluginOptions配置 html-webpack-plugin。值得注意的是v2.1.6 起支持自定义 PostCSS 配置、自定义 devServer 端口这两项能力一直延续到今天的配置体系中见后文配置项演进。v3.0.0Vue 3 时代开启v3.0.02020-11-29是一次技术栈整体换代升级Vue 3、VueRouter 4、VueLoader 16升级Webpack 5、ESLint 7、TypeScript 4。v3 系列继续补强站点能力v3.1.0 升级 docsearch 3 优化搜索框v3.7.0 支持预览 PC 端组件v3.10.0 新增site.simulator选项并支持 iframe 通信跨域v3.9.3 新增build.namedExport选项该配置项至今仍保留详见 config.zh-CN.md。v3.9.0 升级 husky v6并让 commit-lint 命令适配 husky v6v3.9.1这条命令链路延续至今——当前 cli.ts 中仍注册着commit-lint gitParams命令。v4.0.0移除 Webpack全面拥抱 Vite 与 esbuildv4.0.02022-02-07是 Vant CLI 历史上最大的一次重构changelog 用一整节记录了不兼容更新构建引擎替换使用 vite 代替 webpack 进行构建移除了所有 webpack 相关依赖使用 esbuild 进行代码转义和压缩babel preset 添加cjs后缀需要通过vant/cli/preset.cjs引入vant.config.js重命名为vant.config.mjs由 CommonJS 变更为 ESModule 格式——这也是今天vant.config.mjs配置入口的由来站点构建产物的目录由site调整为site-dist不再支持 webpack.config.js 配置文件不再支持 less import 语法中使用波浪号。从当前 package.json 可以看到 v4 决策的长期影响依赖列表中仍然保留vite^5.4.20、esbuild^0.28.1前者负责组件库代码构建后者负责转译与压缩。运行环境要求支持的 node 版本范围提升到^14.16.0 || 16.0.0当前 package.json 的 engines 字段为16.0.0与之一脉相承。依赖策略收紧为避免幽灵依赖不再默认依赖vue/test-utils使用时需要手动安装移除了默认安装的 sass 依赖使用 sass 时需要手动安装yarn add sass移除内置的 babel-plugin-import 插件、移除site.htmlPluginOptions配置项、移除 build 命令的--watch参数、暂时不支持预览桌面端组件。新增能力新增site.htmlMeta配置项至今保留见 config.zh-CN.md新增build.configureWebpack配置项新增 ESModule 格式构建产物lib/[name].es.js与lib/[name].es.min.js新增 CommonJS 格式构建产物lib/[name].cjs.js与lib/[name].cjs.min.jsESModule 与 CommonJS 产物会自动对外部依赖进行 external 处理。依赖大版本升级v4.0.0 同时完成了 eslint v8、jest v27、husky v7、ts-jest v27、postcss v8、commander v8、lint-staged v11、autoprefixer v10 的升级。v4.x 后续小版本v4.0.12022-03-03支持复制示例代码到剪贴板修复官网更新日志版本链接与 issue 链接异常修复 ReDoS 安全问题v4.0.32022-07-02新增build.bundleOptions与css.removeSourceFile配置项修复 script setup 中引用的组件不生效问题移除未使用的 esm bundle 与 ssr.js 文件v4.0.42022-07-02修复构建 sfc 文件类型定义报错问题。其中build.bundleOptions在 config.zh-CN.md 中有完整的类型定义产物格式由minify是否压缩、formatses | cjs | umd | iife、external需要 external 的依赖Vue 默认被 external三个配置项控制默认值包含三组产物未压缩 umd、压缩 umd、escjs 并 external 全部依赖。v5Vite 3 与依赖精简v5.0.02022-10-06v5.0.0 对依赖进行了大版本升级vite由 v2 升级至v3jest由 v27 升级至v29vitejs/plugin-vue由 v2 升级至 v3vitejs/plugin-vue-jsx由 v1 升级至 v2。同时做了两处依赖精简对使用者的 package.json 有直接影响不再默认安装gh-pages依赖站点发布命令改为npx gh-pages- release:site: pnpm build:site gh-pages -d site-dist, release:site: pnpm build:site npx gh-pages -d site-dist,不再默认内置stylelint需要时自行安装yarn add stylelint13 vant/stylelint-config移除 vetur 相关配置由于 Vue 3 推荐使用 volar 而不是 vetur移除了 vetur 相关配置文件并改为默认生成 WebStorm 所需的web-types.json到lib/web-types.json目录——该产物生成逻辑目前位于 src/compiler/web-types 目录下含 parser、formatter、web-types 生成器等模块。v5.1.02022-11-05支持读取vite.config.ts文件来自定义 vite 配置——这是今天配置体系中vite.config.mjs入口的前身见 config.zh-CN.mdVant CLI 使用 Vite 构建组件库代码可在vant.config.mjs同级目录创建 Vite 配置文件并添加任意配置修复设置 vite 的server.port配置项不生效的问题。v6Vite 4 时代的稳定迭代v6.0.02023-02-26vite 由 v3 升级至 v4vitejs/plugin-vue 升级至 v4vitejs/plugin-vue-jsx 升级至 v3移除site.searchConfig配置项修复 build 时解析 markdown 可能报错的问题v6.0.12023-03-11修复编译mjs或cjs时替换 vue 文件导入出现重复后缀的问题v6.1.02023-03-19升级 typescript v5、esbuild v0.17、vite v4.2优化 tsc 错误日志格式v6.2.02023-07-29支持替换 dynamic import 中的文件后缀升级 vite v4.4、esbuild v0.18、prettier v3。至此Vite 时代的依赖体系趋于稳定。v6 的配置面与 v4/v5 基本一致主要差异是删掉了site.searchConfig站点搜索相关能力随后在 v7 的 Rsbuild 时代由文档站点构建流程接管。v7切换到 Rsbuild 与命令面的收缩v7.0.02024-04-14breaking changes 集中爆发changelog 明确提示由于 Vant 仓库自身 workflow 的变化Vant CLI v7 包含了较大的 breaking changes。如果你在使用 Vant CLI v6可以基于 v6 版本 fork 使用changelog 中提供了 v6 代码所在分支的指引。v7.0.0 的具体变更站点的构建工具切换为 Rsbuild移除vant-cli test命令移除vant-cli release命令移除vant-cli changelog命令升级 commander v11升级 markdown-it v13。需要说明的是changelog 对 v7.0.0 的记录与当前仓库源码存在一定出入从 cli.ts 看当前仍注册了release命令支持--tag tag与--gitTag选项对应实现位于 src/commands/release.ts而test、changelog命令确实已不存在于 src/commands 目录当前仅有 build-site、build、clean、commit-lint、dev、release 六个命令实现。因此在升级到 v7 时请以当前仓库源码为准核对命令可用性。v7.0.xRsbuild 时代的修补v7.0.12024-04-14修复 tsconfig 导致的编译错误v7.0.22024-04-20支持读取rsbuild.config.*配置文件支持编译 Vue SFC scopeIdv7.0.32024-05-18修复 scopedId 生成异常。其中 SFC scopeId 的编译逻辑可以在 src/compiler/compile-sfc.ts 中找到印证compile-sfc会判断样式是否 scopedstyles.some((s) s.scoped)若为 scoped 则基于源内容生成哈希作为 scopeIdhasScoped ? hash(source) : 再通过data-v-${scopeId}的形式注入编译选项并在编译后的脚本末尾追加__scopeId ...见 compile-sfc.ts。v7.1.02024-09-17升级 Rsbuild v1。同样地仓库当前的依赖版本已经领先于 changelog 的记录package.json 中rsbuild/core为^2.1.4rsbuild/plugin-vue为 ^1.2.9、rsbuild/plugin-vue-jsx为 ^2.0.1、rsbuild/plugin-babel与rsbuild/plugin-less、rsbuild/plugin-sass一并引入说明 changelog 未覆盖的后续版本中 Rsbuild 相关插件体系已经进一步成熟。当前命令入口 cli.ts 中dev、clean、build、release、build-site、commit-lint 六个命令均在dev 与 build-site 分别对应 Rsbuild 驱动的开发服务器与站点构建。从 changelog 看配置体系与命令体系的演进命令演进对照命令v4 及之前v6v7当前仓库说明dev✅✅✅运行本地开发环境见 cli.tsbuild✅✅✅构建组件库产物输出至es与lib目录build-site✅✅✅构建文档站点v4 后产物目录为site-distrelease✅✅✅当前源码changelog 记录 v7.0.0 移除但当前 cli.ts 仍注册test✅✅❌v7.0.0 移除需自行接入测试框架changelog✅✅❌v7.0.0 移除commit-lint✅✅✅配合 husky 在提交时校验 commit message见 cli.tsclean✅✅✅清理 dist 产物v2.3.0 起为移除而非清空见 cli.ts配置项演进对照结合 config.zh-CN.md 与 changelog可以梳理出配置体系的增删脉络配置入口三件套rsbuild.config.mjs/rsbuild.config.tsv7.0.2 起支持用于文档站点构建、vite.config.mjsv5.1.0 起支持vite.config.ts用于组件库代码构建、vant.config.mjsv4.0.0 由vant.config.js改名而来被移除的配置项site.searchConfigv6.0.0、site.htmlPluginOptionsv4.0.0随 html-webpack-plugin 一起退出新增并保留至今的配置项site.htmlMeta、build.configureWebpackv4.0.0、build.bundleOptions、build.css.removeSourceFilev4.0.3、build.namedExportv3.9.3、site.simulatorv3.10.0。以vant.config.mjs为例一份完整的基本配置如下摘自 config.zh-CN.mdexport default { // 组件库名称 name: demo-ui, // 构建配置 build: { site: { publicPath: /demo-ui/, }, }, // 文档站点配置 site: { // 标题 title: Demo UI, // 图标 logo: https://fastly.jsdelivr.net/npm/vant/assets/logo.png, // 描述 description: 示例组件库, // 左侧导航 nav: [ { title: 开发指南, items: [ { path: home, title: 介绍, }, ], }, { title: 基础组件, items: [ { path: my-button, title: MyButton 按钮, }, ], }, ], }, };其中几个关键配置项的默认值值得注意均以当前 config.zh-CN.md 为准name组件库名称建议使用中划线分割如demo-ui默认build.css.base全局样式文件路径默认style/base.less相对路径基于src目录计算build.css.preprocessorCSS 预处理器支持less与sass默认lessv4.0.0 起 sass 需自行安装build.css.removeSourceFile是否在构建后移除样式源文件默认falsebuild.site.publicPath站点部署子路径默认/部署在子路径时需与之保持一致如/demo-ui/build.srcDir源码目录默认srcbuild.namedExport是否通过 Named Export 导出组件默认false未开启时export default from xxx开启后export * from xxxbuild.packageManager指定包管理器npm | yarn | pnpm | bun默认yarnsite.enableVConsole是否在 dev 时开启 vConsole 调试默认false用于移动端 debug。面向使用者的迁移要点综合 changelog 的 breaking changes 记录从旧版本迁移到当前版本时有以下几个实操要点v6 → v7 是跳跃最大的一步站点构建引擎由 Vite 切换为 Rsbuildtest、changelog命令被移除。迁移前先确认自己的 workflow 是否依赖这两个命令若暂时无法迁移changelog 官方建议基于 v6 版本 fork 使用v6 代码分支可参考 changelog 中的指引。注意命令面差异v7.0.0 曾记录移除release命令但当前仓库 cli.ts 仍注册该命令升级后请以实际安装版本的vant-cli --help输出为准。配置入口按职责拆分文档站点相关配置写rsbuild.config.*组件库构建相关配置写vite.config.*组件库与站点共有配置写vant.config.mjs。依赖按需自装sassv4 起、stylelint 与 gh-pagesv5 起、vue/test-utilsv4 起均不再默认内置需要时按上文命令手动安装。Node 版本要求当前 engines 为16.0.0v4.0.0 起为^14.16.0 || 16.0.0请确保构建环境满足要求。产物格式组件库构建产物包含 ESModulelib/[name].es.js与 CommonJSlib/[name].cjs.js格式发布 npm 时建议在 package.json 中声明main、module与files字段详见 commands.zh-CN.md。深入阅读完整版本记录packages/vant-cli/changelog.md命令使用说明packages/vant-cli/docs/commands.zh-CN.md配置项全量参考packages/vant-cli/docs/config.zh-CN.md命令注册入口packages/vant-cli/src/cli.ts命令实现packages/vant-cli/src/commands编译核心实现含 SFC scopeId 逻辑packages/vant-cli/src/compiler/compile-sfc.ts依赖与版本声明packages/vant-cli/package.json【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vant CLI 版本演进全解析：从 Webpack 到 Rsbuild 的 Vue 组件库构建工具变革路线图
Vant CLI 版本演进全解析从 Webpack 到 Rsbuild 的 Vue 组件库构建工具变革路线图【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vantVant CLIvant/cli是 Vant 组件库开箱自带的构建工具用于快速搭建一套功能完备的 Vue 组件库涵盖本地开发、单元测试、构建发布、文档站点生成等全流程。本文以仓库内 packages/vant-cli/changelog.md 的更新记录为骨架结合 cli.ts、package.json、config.zh-CN.md 等源码与配置完整梳理 v2.x → v7.x 六个大版本的技术变迁帮助你理解 Vant CLI 的设计取舍、掌握版本迁移要点并在遇到问题时快速定位对应版本的行为差异。Vant CLI 是什么根据 README.zh-CN.md 的定义Vant CLI 是一个基于 Rsbuild 实现的 Vue 组件库构建工具通过它可以快速搭建一套功能完备的 Vue 组件库。其核心特性包括基于 Rsbuild 实现享受愉悦的开发体验提供丰富命令涵盖从开发测试到构建发布的完整流程基于约定的目录结构自动生成优雅的文档站点和组件示例构建后的组件库默认支持按需引入、主题定制、Tree Shaking。当前仓库中vant/cli的版本为7.1.0见 package.json。安装方式如下# 通过 npm npm i vant/cli -D # 通过 yarn yarn add vant/cli -D # 通过 pnpm pnpm add vant/cli -D # 通过 Bun bun add vant/cli -D也可以直接执行yarn create vant-cli-app快速创建一个基于 Vant CLI 的项目脚手架对应仓库中的 packages/create-vant-cli-app。版本演进全景六代技术栈的更迭从 changelog.md 的记录看Vant CLI 自 2020 年初v2.1.x到 2024 年 9 月v7.1.0经历了多轮构建技术栈换代核心脉络可以概括为大版本发布时间技术栈基线里程碑事件v2.x2020Webpack 4 / Vue 2引入 create-vant-cli-app、scoped 样式编译、web-types 定义生成v3.x2020-11Webpack 5 / Vue 3全面升级 Vue 3、支持 PC 端组件预览v4.x2022-02Vite 2 esbuild移除全部 webpack 依赖配置文件改为 ESModulev5.x2022-10Vite 3 / jest 29精简 gh-pages、stylelint 依赖切换 volar 生态v6.x2023-02Vite 4 / TS 5移除site.searchConfig动态 import 后缀替换v7.x2024-04Rsbuild构建站点切换 Rsbuild移除 test/changelog 命令下面按里程碑拆解每个大版本的技术决策与 breaking changes。v2 → v3从 Vue 2 迈向 Vue 3 的过渡期v2.x功能奠基v2 系列为 Vant CLI 奠定了核心能力几个关键节点v2.1.82020-01-19新增create-vant-cli-app初始化命令与--version选项——这也是仓库中 packages/create-vant-cli-app 脚手架的直接来源v2.3.02020-03-25build命令支持编译 scoped 样式并支持生成 WebStorm 组件定义文件web-typesclean命令由清空文件夹改为移除文件夹v2.5.02020-05-27开启fork-ts-checker-webpack-plugin在编译时进行类型检查v2.7.02020-12-03支持通过site.htmlPluginOptions配置 html-webpack-plugin。值得注意的是v2.1.6 起支持自定义 PostCSS 配置、自定义 devServer 端口这两项能力一直延续到今天的配置体系中见后文配置项演进。v3.0.0Vue 3 时代开启v3.0.02020-11-29是一次技术栈整体换代升级Vue 3、VueRouter 4、VueLoader 16升级Webpack 5、ESLint 7、TypeScript 4。v3 系列继续补强站点能力v3.1.0 升级 docsearch 3 优化搜索框v3.7.0 支持预览 PC 端组件v3.10.0 新增site.simulator选项并支持 iframe 通信跨域v3.9.3 新增build.namedExport选项该配置项至今仍保留详见 config.zh-CN.md。v3.9.0 升级 husky v6并让 commit-lint 命令适配 husky v6v3.9.1这条命令链路延续至今——当前 cli.ts 中仍注册着commit-lint gitParams命令。v4.0.0移除 Webpack全面拥抱 Vite 与 esbuildv4.0.02022-02-07是 Vant CLI 历史上最大的一次重构changelog 用一整节记录了不兼容更新构建引擎替换使用 vite 代替 webpack 进行构建移除了所有 webpack 相关依赖使用 esbuild 进行代码转义和压缩babel preset 添加cjs后缀需要通过vant/cli/preset.cjs引入vant.config.js重命名为vant.config.mjs由 CommonJS 变更为 ESModule 格式——这也是今天vant.config.mjs配置入口的由来站点构建产物的目录由site调整为site-dist不再支持 webpack.config.js 配置文件不再支持 less import 语法中使用波浪号。从当前 package.json 可以看到 v4 决策的长期影响依赖列表中仍然保留vite^5.4.20、esbuild^0.28.1前者负责组件库代码构建后者负责转译与压缩。运行环境要求支持的 node 版本范围提升到^14.16.0 || 16.0.0当前 package.json 的 engines 字段为16.0.0与之一脉相承。依赖策略收紧为避免幽灵依赖不再默认依赖vue/test-utils使用时需要手动安装移除了默认安装的 sass 依赖使用 sass 时需要手动安装yarn add sass移除内置的 babel-plugin-import 插件、移除site.htmlPluginOptions配置项、移除 build 命令的--watch参数、暂时不支持预览桌面端组件。新增能力新增site.htmlMeta配置项至今保留见 config.zh-CN.md新增build.configureWebpack配置项新增 ESModule 格式构建产物lib/[name].es.js与lib/[name].es.min.js新增 CommonJS 格式构建产物lib/[name].cjs.js与lib/[name].cjs.min.jsESModule 与 CommonJS 产物会自动对外部依赖进行 external 处理。依赖大版本升级v4.0.0 同时完成了 eslint v8、jest v27、husky v7、ts-jest v27、postcss v8、commander v8、lint-staged v11、autoprefixer v10 的升级。v4.x 后续小版本v4.0.12022-03-03支持复制示例代码到剪贴板修复官网更新日志版本链接与 issue 链接异常修复 ReDoS 安全问题v4.0.32022-07-02新增build.bundleOptions与css.removeSourceFile配置项修复 script setup 中引用的组件不生效问题移除未使用的 esm bundle 与 ssr.js 文件v4.0.42022-07-02修复构建 sfc 文件类型定义报错问题。其中build.bundleOptions在 config.zh-CN.md 中有完整的类型定义产物格式由minify是否压缩、formatses | cjs | umd | iife、external需要 external 的依赖Vue 默认被 external三个配置项控制默认值包含三组产物未压缩 umd、压缩 umd、escjs 并 external 全部依赖。v5Vite 3 与依赖精简v5.0.02022-10-06v5.0.0 对依赖进行了大版本升级vite由 v2 升级至v3jest由 v27 升级至v29vitejs/plugin-vue由 v2 升级至 v3vitejs/plugin-vue-jsx由 v1 升级至 v2。同时做了两处依赖精简对使用者的 package.json 有直接影响不再默认安装gh-pages依赖站点发布命令改为npx gh-pages- release:site: pnpm build:site gh-pages -d site-dist, release:site: pnpm build:site npx gh-pages -d site-dist,不再默认内置stylelint需要时自行安装yarn add stylelint13 vant/stylelint-config移除 vetur 相关配置由于 Vue 3 推荐使用 volar 而不是 vetur移除了 vetur 相关配置文件并改为默认生成 WebStorm 所需的web-types.json到lib/web-types.json目录——该产物生成逻辑目前位于 src/compiler/web-types 目录下含 parser、formatter、web-types 生成器等模块。v5.1.02022-11-05支持读取vite.config.ts文件来自定义 vite 配置——这是今天配置体系中vite.config.mjs入口的前身见 config.zh-CN.mdVant CLI 使用 Vite 构建组件库代码可在vant.config.mjs同级目录创建 Vite 配置文件并添加任意配置修复设置 vite 的server.port配置项不生效的问题。v6Vite 4 时代的稳定迭代v6.0.02023-02-26vite 由 v3 升级至 v4vitejs/plugin-vue 升级至 v4vitejs/plugin-vue-jsx 升级至 v3移除site.searchConfig配置项修复 build 时解析 markdown 可能报错的问题v6.0.12023-03-11修复编译mjs或cjs时替换 vue 文件导入出现重复后缀的问题v6.1.02023-03-19升级 typescript v5、esbuild v0.17、vite v4.2优化 tsc 错误日志格式v6.2.02023-07-29支持替换 dynamic import 中的文件后缀升级 vite v4.4、esbuild v0.18、prettier v3。至此Vite 时代的依赖体系趋于稳定。v6 的配置面与 v4/v5 基本一致主要差异是删掉了site.searchConfig站点搜索相关能力随后在 v7 的 Rsbuild 时代由文档站点构建流程接管。v7切换到 Rsbuild 与命令面的收缩v7.0.02024-04-14breaking changes 集中爆发changelog 明确提示由于 Vant 仓库自身 workflow 的变化Vant CLI v7 包含了较大的 breaking changes。如果你在使用 Vant CLI v6可以基于 v6 版本 fork 使用changelog 中提供了 v6 代码所在分支的指引。v7.0.0 的具体变更站点的构建工具切换为 Rsbuild移除vant-cli test命令移除vant-cli release命令移除vant-cli changelog命令升级 commander v11升级 markdown-it v13。需要说明的是changelog 对 v7.0.0 的记录与当前仓库源码存在一定出入从 cli.ts 看当前仍注册了release命令支持--tag tag与--gitTag选项对应实现位于 src/commands/release.ts而test、changelog命令确实已不存在于 src/commands 目录当前仅有 build-site、build、clean、commit-lint、dev、release 六个命令实现。因此在升级到 v7 时请以当前仓库源码为准核对命令可用性。v7.0.xRsbuild 时代的修补v7.0.12024-04-14修复 tsconfig 导致的编译错误v7.0.22024-04-20支持读取rsbuild.config.*配置文件支持编译 Vue SFC scopeIdv7.0.32024-05-18修复 scopedId 生成异常。其中 SFC scopeId 的编译逻辑可以在 src/compiler/compile-sfc.ts 中找到印证compile-sfc会判断样式是否 scopedstyles.some((s) s.scoped)若为 scoped 则基于源内容生成哈希作为 scopeIdhasScoped ? hash(source) : 再通过data-v-${scopeId}的形式注入编译选项并在编译后的脚本末尾追加__scopeId ...见 compile-sfc.ts。v7.1.02024-09-17升级 Rsbuild v1。同样地仓库当前的依赖版本已经领先于 changelog 的记录package.json 中rsbuild/core为^2.1.4rsbuild/plugin-vue为 ^1.2.9、rsbuild/plugin-vue-jsx为 ^2.0.1、rsbuild/plugin-babel与rsbuild/plugin-less、rsbuild/plugin-sass一并引入说明 changelog 未覆盖的后续版本中 Rsbuild 相关插件体系已经进一步成熟。当前命令入口 cli.ts 中dev、clean、build、release、build-site、commit-lint 六个命令均在dev 与 build-site 分别对应 Rsbuild 驱动的开发服务器与站点构建。从 changelog 看配置体系与命令体系的演进命令演进对照命令v4 及之前v6v7当前仓库说明dev✅✅✅运行本地开发环境见 cli.tsbuild✅✅✅构建组件库产物输出至es与lib目录build-site✅✅✅构建文档站点v4 后产物目录为site-distrelease✅✅✅当前源码changelog 记录 v7.0.0 移除但当前 cli.ts 仍注册test✅✅❌v7.0.0 移除需自行接入测试框架changelog✅✅❌v7.0.0 移除commit-lint✅✅✅配合 husky 在提交时校验 commit message见 cli.tsclean✅✅✅清理 dist 产物v2.3.0 起为移除而非清空见 cli.ts配置项演进对照结合 config.zh-CN.md 与 changelog可以梳理出配置体系的增删脉络配置入口三件套rsbuild.config.mjs/rsbuild.config.tsv7.0.2 起支持用于文档站点构建、vite.config.mjsv5.1.0 起支持vite.config.ts用于组件库代码构建、vant.config.mjsv4.0.0 由vant.config.js改名而来被移除的配置项site.searchConfigv6.0.0、site.htmlPluginOptionsv4.0.0随 html-webpack-plugin 一起退出新增并保留至今的配置项site.htmlMeta、build.configureWebpackv4.0.0、build.bundleOptions、build.css.removeSourceFilev4.0.3、build.namedExportv3.9.3、site.simulatorv3.10.0。以vant.config.mjs为例一份完整的基本配置如下摘自 config.zh-CN.mdexport default { // 组件库名称 name: demo-ui, // 构建配置 build: { site: { publicPath: /demo-ui/, }, }, // 文档站点配置 site: { // 标题 title: Demo UI, // 图标 logo: https://fastly.jsdelivr.net/npm/vant/assets/logo.png, // 描述 description: 示例组件库, // 左侧导航 nav: [ { title: 开发指南, items: [ { path: home, title: 介绍, }, ], }, { title: 基础组件, items: [ { path: my-button, title: MyButton 按钮, }, ], }, ], }, };其中几个关键配置项的默认值值得注意均以当前 config.zh-CN.md 为准name组件库名称建议使用中划线分割如demo-ui默认build.css.base全局样式文件路径默认style/base.less相对路径基于src目录计算build.css.preprocessorCSS 预处理器支持less与sass默认lessv4.0.0 起 sass 需自行安装build.css.removeSourceFile是否在构建后移除样式源文件默认falsebuild.site.publicPath站点部署子路径默认/部署在子路径时需与之保持一致如/demo-ui/build.srcDir源码目录默认srcbuild.namedExport是否通过 Named Export 导出组件默认false未开启时export default from xxx开启后export * from xxxbuild.packageManager指定包管理器npm | yarn | pnpm | bun默认yarnsite.enableVConsole是否在 dev 时开启 vConsole 调试默认false用于移动端 debug。面向使用者的迁移要点综合 changelog 的 breaking changes 记录从旧版本迁移到当前版本时有以下几个实操要点v6 → v7 是跳跃最大的一步站点构建引擎由 Vite 切换为 Rsbuildtest、changelog命令被移除。迁移前先确认自己的 workflow 是否依赖这两个命令若暂时无法迁移changelog 官方建议基于 v6 版本 fork 使用v6 代码分支可参考 changelog 中的指引。注意命令面差异v7.0.0 曾记录移除release命令但当前仓库 cli.ts 仍注册该命令升级后请以实际安装版本的vant-cli --help输出为准。配置入口按职责拆分文档站点相关配置写rsbuild.config.*组件库构建相关配置写vite.config.*组件库与站点共有配置写vant.config.mjs。依赖按需自装sassv4 起、stylelint 与 gh-pagesv5 起、vue/test-utilsv4 起均不再默认内置需要时按上文命令手动安装。Node 版本要求当前 engines 为16.0.0v4.0.0 起为^14.16.0 || 16.0.0请确保构建环境满足要求。产物格式组件库构建产物包含 ESModulelib/[name].es.js与 CommonJSlib/[name].cjs.js格式发布 npm 时建议在 package.json 中声明main、module与files字段详见 commands.zh-CN.md。深入阅读完整版本记录packages/vant-cli/changelog.md命令使用说明packages/vant-cli/docs/commands.zh-CN.md配置项全量参考packages/vant-cli/docs/config.zh-CN.md命令注册入口packages/vant-cli/src/cli.ts命令实现packages/vant-cli/src/commands编译核心实现含 SFC scopeId 逻辑packages/vant-cli/src/compiler/compile-sfc.ts依赖与版本声明packages/vant-cli/package.json【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考