vue cli源码学习之cli-service

目录结构分析

cli-service/ ：根目录，代表项目的主要服务模块，用于提供命令行服务或插件功能。

tests/ ：测试文件夹，通常用于存放自动化测试代码。文件夹命名约定为 tests，可能包含单元测试或集成测试，用于验证项目功能的正确性。

bin/ ：存放可执行文件或脚本，通常包含启动 CLI 服务的入口文件。例如，可以包含一个启动脚本（如 cli-service），用于用户直接在命令行中调用。

generator/ ：用于生成代码的模块，通常包含脚手架代码或代码生成器的逻辑。generator 目录下可能会包含模板和代码生成逻辑，用于生成项目中的文件或初始化项目配置。

lib/：库文件夹，包含项目的核心逻辑代码，主要是供外部调用的核心函数和类等。通常在项目中引用这些功能模块实现特定功能。

migrator/：用于 管理迁移脚本 的目录。该文件夹通常包含数据迁移或版本迁移的逻辑，如数据库结构的迁移等。适用于项目的升级或数据结构的演变。

types/：类型声明文件夹。通常用于 TypeScript 项目，定义接口和类型，以确保类型安全和代码的可维护性。类型声明可以为其他模块提供类型支持。

.npmignore：文件用于指定哪些文件和文件夹在发布到 npm 时应被忽略。通过 .npmignore 文件可以控制不需要的文件或目录（如测试文件夹、配置文件等）不会被包含在 npm 包中。

package.json：项目的配置文件，定义了项目的基本信息（如名称、版本、依赖项、脚本等），也是 npm 项目必须包含的文件。通过 package.json 可以管理项目的依赖、命令和元数据。

README.md：项目的自述文件，通常用于向用户介绍项目的功能、安装方法、使用指南等。README.md 文件在 GitHub 和 npm 上也会展示出来，帮助用户了解和使用项目。

webpack.config.js：Webpack 的配置文件，用于配置项目的打包过程。Webpack 是一个前端打包工具，配置文件定义了如何处理、打包项目中的资源（如 JavaScript、CSS、图像等）。

bin/ 目录下的启动脚本

vue-cli-service 的命令行脚本，主要功能是启动 Vue CLI 服务。以下是代码的主要作用和流程：
1.检查 Node.js 版本：
使用 semver 模块检查当前运行的 Node.js 版本是否满足 package.json 中定义的版本要求。
如果不满足要求，输出错误信息并终止进程。

2. 创建服务实例：
导入 Service 类并创建一个服务实例。服务的上下文是当前工作目录或环境变量VUE_CLI_CONTEXT 指定的目录。

3.解析命令行参数：
使用 minimist 模块解析命令行参数。
定义了一些布尔类型的选项，如 modern、report、open 等。
这些选项是命令行参数，用于配置和控制 vue-cli-service 的行为。以下是每个选项的作用：

构建相关选项：
modern：启用现代模式构建，生成现代 JavaScript 代码以利用新浏览器的特性。
report：生成构建报告，通常用于分析打包后的文件大小和依赖关系。
report-json：生成 JSON 格式的构建报告。
inline-vue：将 Vue 的运行时内联到构建的包中。
watch：在开发模式下监听文件变化，自动重新构建。

服务相关选项：
open：在启动开发服务器后自动打开浏览器。
copy：将本地 URL 复制到剪贴板。
https：使用 HTTPS 协议启动开发服务器。

检查相关选项：
verbose：启用详细模式，输出更详细的日志信息，通常用于调试。
这些选项可以通过命令行传递给 vue-cli-service，以便在开发和构建过程中自定义其行为。

4. 获取并运行命令：
从解析的参数中获取要执行的命令。
调用服务实例的 run 方法执行命令，并传递解析的参数。
如果执行过程中出现错误，捕获错误并输出，然后终止进程。
Vue CLI 的一个入口脚本，用于根据用户输入的命令和参数启动相应的服务或构建任务。

generator/路径下的index.js文件

Vue CLI 服务生成器的模块，主要用于根据用户的选项配置项目的模板和依赖。以下是代码的主要功能：
1.模板渲染：
使用 api.render 方法渲染项目模板，并根据是否安装了 Babel 或 TypeScript 插件来决定是否编译代码。

2. 依赖管理：
根据用户选择的 Vue 版本（Vue 2 或 Vue 3），设置相应的项目依赖。
如果是 Vue 2，还会添加 vue-template-compiler 作为开发依赖。

3.脚本和浏览器支持：
扩展 package.json，添加 serve 和 build 脚本，用于启动开发服务器和构建生产环境代码。
配置 browserslist，以支持特定市场份额的浏览器，并根据 Vue 版本决定是否支持 IE 11。

4.CSS 预处理器支持：
根据用户选择的 CSS 预处理器（如 Sass、Less、Stylus），添加相应的开发依赖。

5.Vue 3 兼容性：
如果用户选择了路由或 Vuex，但没有安装相应的插件，则引入默认的路由或 Vuex 配置。

6.额外工具配置：
如果用户提供了额外的配置选项，则将这些配置扩展到 package.json。

7. TypeScript 支持：
如果项目使用 TypeScript，则删除 jsconfig.json 文件，因为 TypeScript 项目通常使用 tsconfig.json。
这段代码的目的是根据用户的选择自动配置 Vue 项目，以便开发者可以快速启动项目开发。

module.exports = (api, options) => {// 渲染模板，判断是否使用 Babel 或 TypeScriptapi.render('./template', {doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript'),useBabel: api.hasPlugin('babel')})// 根据 Vue 版本设置依赖if (options.vueVersion === '3') {api.extendPackage({dependencies: {'vue': '^3.2.13' // Vue 3 版本}})} else {api.extendPackage({dependencies: {'vue': '^2.6.14' // Vue 2 版本},devDependencies: {'vue-template-compiler': '^2.6.14' // Vue 2 模板编译器}})}// 扩展 package.json 的脚本和浏览器列表api.extendPackage({scripts: {'serve': 'vue-cli-service serve', // 启动开发服务器'build': 'vue-cli-service build'  // 构建生产环境代码},browserslist: ['> 1%', // 支持市场份额大于 1% 的浏览器'last 2 versions', // 支持最新的两个版本'not dead', // 不支持已停止更新的浏览器...(options.vueVersion === '3' ? ['not ie 11'] : []) // Vue 3 不支持 IE 11]})// 根据选择的 CSS 预处理器添加相应的开发依赖if (options.cssPreprocessor) {const deps = {sass: {sass: '^1.32.7','sass-loader': '^12.0.0'},'dart-sass': {sass: '^1.32.7','sass-loader': '^12.0.0'},less: {'less': '^4.0.0','less-loader': '^8.0.0'},stylus: {'stylus': '^0.55.0','stylus-loader': '^6.1.0'}}api.extendPackage({devDependencies: deps[options.cssPreprocessor]})}// Vue 3 兼容性：如果选择了路由但没有安装插件，则引入路由配置if (options.router && !api.hasPlugin('router')) {require('./router')(api, options, options)}// Vue 3 兼容性：如果选择了 Vuex 但没有安装插件，则引入 Vuex 配置if (options.vuex && !api.hasPlugin('vuex')) {require('./vuex')(api, options, options)}// 额外的工具配置if (options.configs) {api.extendPackage(options.configs)}// 如果使用 TypeScript，删除 jsconfig.json 文件if (api.hasPlugin('typescript')) {api.render((files) => delete files['jsconfig.json'])}
}

cli-service\generator\template\src\App.vue 文件

这段代码是一个 Vue.js 应用程序的模板文件，通常用于生成一个新的 Vue.js 项目。以下是代码的主要作用和结构：

1. 模板部分:
   根据 rootOptions.vueVersion 判断使用 Vue 3 还是 Vue 2。
   如果是 Vue 3，直接在根元素下显示 Vue 的 logo 和一个 HelloWorld 组件或欢迎标题。
   如果是 Vue 2，使用一个 div 包裹内容，显示 Vue 的 logo 和一个 HelloWorld 组件或欢迎标题。
   rootOptions.bare 用于判断是否显示 HelloWorld 组件或简单的欢迎标题。

2. 脚本部分:
   导入 HelloWorld 组件。
   定义一个 Vue 组件，名称为 App，并注册 HelloWorld 组件。

3. 样式部分:
   根据 rootOptions.cssPreprocessor 判断使用哪种 CSS 预处理器。
   如果不是 stylus，则根据选择的预处理器语言设置样式语言。
   定义了 #app 的样式，包括字体、文本对齐、颜色等。
   这段代码通过条件语句和模板语法，动态生成适合不同项目配置的 Vue.js 应用程序模板。

<template>
<%_ if (rootOptions.vueVersion === '3') { _%><img alt="Vue logo" src="./assets/logo.png"><%_ if (!rootOptions.bare) { _%><HelloWorld msg="Welcome to Your Vue.js App"/><%_ } else { _%><h1>Welcome to Your Vue.js App</h1><%_ } _%>
<%_ } else { _%><div id="app"><img alt="Vue logo" src="./assets/logo.png"><%_ if (!rootOptions.bare) { _%><HelloWorld msg="Welcome to Your Vue.js App"/><%_ } else { _%><h1>Welcome to Your Vue.js App</h1><%_ } _%></div>
<%_ } _%>
</template>
<%_ if (!rootOptions.bare) { _%><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><%_ if (rootOptions.cssPreprocessor !== 'stylus') { _%>
<style<%-rootOptions.cssPreprocessor? ` lang="${rootOptions.cssPreprocessor.includes('sass')? 'scss': rootOptions.cssPreprocessor}"`: ``
%>>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
<%_ } else { _%>
<style lang="stylus">
#appfont-family Avenir, Helvetica, Arial, sans-serif-webkit-font-smoothing antialiased-moz-osx-font-smoothing grayscaletext-align centercolor #2c3e50margin-top 60px
</style>
<%_ } _%>
<%_ } _%>