深入解析 Vue CLI 系统架构CLI、CLI Service 与 CLI Plugins 三大组件详解【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli本文基于 vue-cli 官方指南《Overview》一文结合仓库源码packages/vue目录对 Vue CLI 的体系结构进行纵深剖析。Vue CLI 是一套面向 Vue.js 快速开发的完整工具系统vue/cli提供交互式项目脚手架与图形化管理界面vue/cli-service是构建于 webpack 之上的可升级运行时依赖vue/cli-plugin-*系列插件则负责按需集成 Babel、TypeScript、ESLint、单元测试与端到端测试等能力。读完本文你将理解这三个组件各自的职责边界、它们之间的协作机制以及如何利用插件体系实现无需 eject 的深度定制。系统概览Vue CLI 想解决的问题Vue CLI 的定位是成为 Vue 生态的标准工具基线standard tooling baseline。它的核心承诺是让各类构建工具以合理的默认配置协同工作使开发者把精力放在编写应用本身而不是花费数天时间与配置文件搏斗与此同时它依然保留了逐项微调每个工具配置的能力且全程无需 eject这一点在官方文档的 Configuration without Ejecting 一节中被反复强调详见 CLI Service 指南。Vue CLI 对外提供的四类能力交互式项目脚手架通过vue/cli提供vue create命令可升级的运行时依赖vue/cli-service构建于 webpack 之上内置合理的默认配置支持通过项目内配置文件vue.config.js定制并可通过插件扩展丰富的官方插件集成前端生态中优秀的工具Babel/TypeScript 转译、ESLint 集成、单元测试、端到端测试等完整的图形化界面通过vue ui创建和管理 Vue.js 项目。从源码层面看Vue CLI 是一个monorepo包含多个独立发布、相互协作的 npm 包。仓库根目录的packages/vue/下即存放了这些包包括cli、cli-service、cli-plugin-*、cli-shared-utils、cli-ui等。下面逐一拆解三大核心组件。CLIvue/cli全局安装的命令行入口CLI 是全局安装的 npm 包为终端提供vue命令。它负责两件事通过vue create快速脚手架一个新项目通过vue ui以图形界面管理项目。从 packages/vue/cli/package.json 可以看到其版本为5.0.9bin字段将vue命令指向bin/vue.js并声明 Node 版本要求为^12.0.0 || 14.0.0。vue命令的真正实现位于 bin/vue.js它基于commander构建命令体系。在入口处它首先通过vue/cli-shared-utils的semver校验 Node 版本——如果版本过旧会直接报错退出这是 CLI 稳定性设计的第一道防线。完整命令清单如下命令作用vue create app-name创建新项目支持-p/--preset、-d/--default、-i/--inlinePreset、-m/--packageManager、-g/--git、-n/--no-git、-f/--force、-c/--clone、-x/--proxy等选项vue add plugin在已有项目中安装插件并调用其 generatorvue invoke plugin跳过安装仅调用已安装插件的 generatorvue inspect [paths...]查看项目 webpack 配置支持--rule、--plugin、--rules、--plugins、-v/--verbosevue serve/vue build当前项目中npm run serve/npm run build的别名vue ui启动图形化界面支持-H/--host、-p/--port、--headless、--quietvue init template app-name旧版 API从远程模板生成项目需vue/cli-initvue config [value]查看/修改全局配置~/.vuerc支持-g/--get、-s/--set、-d/--delete、-e/--edit、--jsonvue outdated实验性检查 cli service/plugins 是否有新版本支持--nextvue upgrade [plugin-name]实验性升级 cli service/pluginsvue migrate [plugin-name]实验性对已安装插件运行 migrator需-f/--from versionvue info打印调试信息系统、Node/Yarn/npm、浏览器、相关 npm 包值得一提的细节当输入未知命令时bin/vue.js会利用leven莱文斯坦距离算法计算与现有命令的编辑距离给出 Did you mean ... 的智能纠错建议同时它还会增强 commander 的错误提示把 Missing required argument 之类的报错润色为更可读的文案。vue create的具体流程由 packages/vue/cli/lib/create.js 驱动其背后的Creator类Creator.js负责加载预设、收集各插件的交互提示prompts并最终生成项目文件。仓库中 Creator.spec.js 等测试对这条链路做了系统验证包括 mock preset、异步 generator、带 README 的 preset 等场景。CLI Servicevue/cli-service项目内的构建运行时CLI Service 是安装到每个由vue/cli创建的项目中的开发依赖development dependency。它构建于 webpack 和 webpack-dev-server 之上包含三部分内容核心服务负责加载其他 CLI 插件内部 webpack 配置针对大多数应用场景做了优化vue-cli-service可执行文件内置serve、build、inspect三个基础命令。对熟悉 create-react-app 的开发者而言vue/cli-service大致相当于react-scripts但功能集合并不相同。其详细用法见 CLI Service 指南。版本与依赖画像从 packages/vue/cli-service/package.json 可以看出5.0.9版本的依赖核心是 webpack^5.54.0与 webpack-dev-server^4.7.3并集成了vue-loader17、css-loader、postcss-loader、mini-css-extract-plugin、terser-webpack-plugin、webpack-bundle-analyzer、webpack-chain等一系列构建基础设施。它通过peerDependencies声明与vue-template-compiler、webpack-sources的可选协作关系同时将sass-loader、less-loader、stylus-loader等预处理器 loader 标记为可选 peer 依赖——这正体现了合理的默认配置 按需启用的设计哲学。入口与命令执行项目内的二进制入口是 bin/vue-cli-service.js。它同样先做 Node 版本校验然后实例化Serviceconst Service require(../lib/Service) const service new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) const rawArgv process.argv.slice(2) const args require(minimist)(rawArgv, { boolean: [...] }) const command args._[0] service.run(command, args, rawArgv).catch(err { error(err); process.exit(1) })这里揭示了一个关键设计VUE_CLI_CONTEXT环境变量可以重定向服务上下文这是测试环境与某些特殊部署场景赖以工作的机制。Service 内核插件加载与生命周期Service类lib/Service.js是 CLI Service 的中枢。它的核心职责可以归纳为四条解析 package.json 中的插件resolvePlugins从项目的devDependencies与dependencies中筛选出所有符合插件命名规则isPlugin的包加上一组内置插件serve、build、inspect、help四个命令插件以及base、assets、css、prod、app五个配置插件再通过sortPluginscli-shared-utils/lib/pluginOrder.js 中的拓扑排序实现按after依赖关系确定执行顺序加载环境变量loadEnv按模式读取.env、.env.local、.env.[mode]等文件基于dotenv与dotenv-expand并在未显式设置时把NODE_ENV/BABEL_ENV默认置为development/production/test加载用户配置loadUserOptions合并vue.config.js文件配置、package.json中的vue字段与内联选项并用defaultsDeep与内置默认值lib/options.js融合最终得到projectOptions应用插件init把PluginAPI实例分发给每个插件插件借此向 webpack 链式配置webpackChainFns与原始配置webpackRawConfigFns中注入规则。最终resolveWebpackConfig依次执行链式配置函数基于webpack-chain与原始配置函数基于webpack-merge产出最终 webpack 配置。它还包含一条防御性检查当构建目标不是app时若用户直接修改了output.publicPath会抛出错误提示改用vue.config.js中的publicPath选项。三个内置命令vue-cli-service的内置命令及其完整参数如下详见 docs/guide/cli-service.mdserve开发服务器基于 webpack-dev-server开箱即用 HMRUsage: vue-cli-service serve [options] [entry] --open 启动时自动打开浏览器 --copy 启动时将 URL 复制到剪贴板 --mode 指定环境模式默认: development --host 指定主机默认: 0.0.0.0 --port 指定端口默认: 8080 --https 使用 https默认: false --public 为 HMR 客户端指定公网 URL --skip-plugins 以逗号分隔的本次运行要跳过的插件名列表build生产构建输出到dist/目录包含 JS/CSS/HTML 压缩与自动 vendor 分包chunk manifest 内联进 HTMLUsage: vue-cli-service build [options] [entry|pattern] --mode 指定环境模式默认: production --dest 指定输出目录默认: dist --modern 以现代浏览器为目标构建并自动回退旧版 --target app | lib | wc | wc-async默认: app --formats 库构建的输出格式列表默认: commonjs,umd,umd-min --inline-vue 在库或 Web Component 目标的最终包中内联 Vue 模块 --name 库或 Web Component 模式的名称默认取 package.json 的 name 或入口文件名 --filename 输出文件名仅对 lib target 可用 --no-clean 构建前不清理 dist 目录 --report 生成 report.html 帮助分析包内容 --report-json 生成 report.json 帮助分析包内容 --skip-plugins 逗号分隔的本次运行要跳过的插件名列表 --watch 监听变更inspect查看项目最终 webpack 配置默认模式 development详见 webpack 指南 中的 Inspecting the Projects Webpack Config 一节Usage: vue-cli-service inspect [options] [...paths] --mode 指定环境模式默认: development缓存、并行与 Git Hookscache-loader默认对 Vue/Babel/TypeScript 编译启用缓存位于node_modules/.cache——遇到编译异常官方建议先删除该缓存目录再排查当机器 CPU 核心数大于 1 时thread-loader会对 Babel/TypeScript 转译启用并行vue/cli-service会安装 yorkiehusky 的分叉与 husky 不兼容从而支持在package.json中用gitHooks字段声明 Git 钩子例如{ gitHooks: { pre-commit: lint-staged }, lint-staged: { *.{js,vue}: vue-cli-service lint } }无需 eject 的配置哲学vue create创建的项目开箱即用各插件协同工作。但当需求超出默认范围时Vue CLI 允许你在不 eject 的前提下配置几乎每一个工具环节——这正是 Config Referencevue.config.js全量参数与webpack-chain/configureWebpack双通道定制机制存在的意义。CLI Plugins按需扩展的插件体系CLI 插件是向 Vue CLI 项目提供可选功能的 npm 包例如 Babel/TypeScript 转译、ESLint 集成、单元测试Jest/Mocha、端到端测试Cypress/Nightwatch/WebdriverIO等。识别插件的方式非常直观名称以vue/cli-plugin-开头的是官方内置插件以vue-cli-plugin-开头的是社区插件。命名规则与解析这一规则的具体实现位于 cli-shared-utils/lib/pluginResolution.js核心正则如下const pluginRE /^(vue\/|vue-|[\w-](\.)?[\w-]\/vue-)cli-plugin-/resolvePluginId支持把简写解析为完整包名pwa→vue/cli-plugin-pwa官方简写官方插件白名单见源码officialPlugins数组babel、e2e-cypress、e2e-nightwatch、e2e-webdriverio、eslint、pwa、router、typescript、unit-jest、unit-mocha、vuex、webpack-4vue/pwa→vue/cli-plugin-pwascope 简写apollo→vue-cli-plugin-apollo社区插件默认形式foo/bar→foo/vue-cli-plugin-bar带 scope 的社区插件。插件加载机制当你在项目内运行vue-cli-service二进制时它会自动解析并加载项目package.json中列出的所有 CLI 插件从devDependencies与dependencies中筛选无需任何手动注册。每个插件既是generator负责创建文件也是runtime 插件负责调整核心 webpack 配置、注入命令例如vue/cli-plugin-eslint会注入vue-cli-service lint命令。查看某个项目所有可用命令npx --no vue-cli-service help npx --no vue-cli-service help [command]插件管理add、invoke 与预设Presets安装到已有项目用vue add它专门用于安装并调用 Vue CLI 插件不是普通 npm 包安装的替代品vue add eslint # 解析为 vue/cli-plugin-eslint vue add cli-plugin-eslint # 等价写法 vue add apollo # 安装 vue-cli-plugin-apollo vue add foo/bar # 安装 foo/vue-cli-plugin-bar vue add eslint --config airbnb --lintOn save # 传入 generator 选项跳过 prompts官方强烈建议在运行vue add前提交当前项目状态因为该命令会调用插件的文件生成器可能改动既有文件。已安装的插件可以只用vue invoke重新调用其 generator。项目本地插件如果只想在项目内使用插件 API 而不想发布完整插件可在package.json中声明{ vuePlugins: { service: [my-commands.js], ui: [my-ui.js] } }每个文件需要导出一个以插件 API 为第一个参数的函数详见 Plugin Development Guide 与 UI Plugin API。此外vuePlugins.resolveFrom可让插件解析指向其他目录的package.json如.config目录这一能力在Service.resolvePkg中有对应实现。预设Preset是包含预定义选项与插件的 JSON 对象让创建项目时无需再逐一回答交互提示。vue create过程中保存的预设存放在用户主目录的~/.vuerc文件中可直接编辑。示例预设{ useConfigFiles: true, cssPreprocessor: sass, plugins: { vue/cli-plugin-babel: {}, vue/cli-plugin-eslint: { config: airbnb, lintOn: [save, commit] }, vue/cli-plugin-router: {}, vue/cli-plugin-vuex: {} } }预设还支持为集成工具补充配置configs字段这些配置会根据useConfigFiles的值合并进package.json或对应配置文件如configs.vue合并进vue.config.js可以显式指定插件版本version: ^3.0.0对第三方插件官方强烈建议声明版本范围可以设置prompts: true让预设保留插件的交互提示还可以通过 git 仓库共享远程预设仓库需包含preset.json、可选generator.js与prompts.js并用--preset引用vue create --preset username/repo my-project vue create --preset gitlab:username/repo --clone my-project vue create --preset bitbucket:username/repo --clone my-project vue create --preset ./my-preset my-project # 本地目录含 preset.json vue create --preset my-preset.json my-project # 本地 JSON 文件以上插件的完整说明见 Plugins and Presets。官方插件清单本仓库实际包含在packages/vue/下可以直接查阅各官方插件的实现源码、generator 模板与测试插件能力仓库位置cli-plugin-babelBabel 转译与 babel.config.js 生成packages/vue/cli-plugin-babelcli-plugin-typescriptTypeScript 支持packages/vue/cli-plugin-typescriptcli-plugin-eslintESLint 集成与 lint 命令packages/vue/cli-plugin-eslintcli-plugin-router / vuex路由与状态管理脚手架cli-plugin-router / cli-plugin-vuexcli-plugin-unit-jest / unit-mocha单元测试cli-plugin-unit-jest / cli-plugin-unit-mochacli-plugin-e2e-cypress / nightwatch / webdriverio端到端测试cli-plugin-e2e-cypress 等cli-plugin-pwaPWA 支持Service Workerpackages/vue/cli-plugin-pwa此外vue/cli-ui图形界面服务端、vue/cli-ui-addon-webpackWebpack Analyzer 面板、vue/cli-ui-addon-widgets仪表盘小组件、vue/cli-shared-utils共享工具库以及vue/cli-overlay编译错误浮层共同构成了完整的工具链。插件排序拓扑排序保证执行顺序插件之间的执行顺序并非随机。每个插件可以通过导出after属性声明它必须在哪些插件之后执行sortPluginspluginOrder.js将其建模为有向图并进行拓扑排序源码注释直接引用了 LeetCode 210 题若无法找到合法的执行顺序则回退到原始顺序并给出警告。这一设计保证了配置类插件如base、css、prod、app与功能类插件之间稳定、可预期的叠加顺序——这也是 Vue CLI 能实现多插件协同而不互相冲突的底层保障之一。从 Overview 到实践推荐的阅读路径围绕本文介绍的三大组件官方指南提供了对应的深入章节建议按需查阅CLI Service 详细用法docs/guide/cli-service.md含 serve/build/inspect 完整参数、缓存与并行、Git Hooks创建项目docs/guide/creating-a-project.mdvue create与vue ui的完整流程插件与预设docs/guide/plugins-and-presets.mdadd/invoke、远程/本地预设配置参考docs/config/index.mdvue.config.js全量选项Webpack 定制docs/guide/webpack.mdchainWebpack/configureWebpack与vue-cli-service inspect插件开发docs/dev-guide/plugin-dev.md 与 docs/dev-guide/ui-api.md浏览器兼容与 Modern Modedocs/guide/browser-compatibility.md。小结Vue CLI 的架构可以概括为一句话CLI 负责创建CLI Service 负责运行CLI Plugins 负责扩展。三者通过 npm 包的依赖关系、package.json的约定式声明以及 Service 内核的插件加载/拓扑排序机制被有机地串联在一起。官方《Overview》文档所描绘的标准工具基线愿景在源码层面有着扎实的实现支撑无需 eject 的配置通道、基于 webpack-chain 的链式定制、自动化的插件解析与排序共同构成了这套既开箱即用又深度可定制的 Vue.js 工程化体系。【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
