分析 Vue CLI 源码中 `service` 模块如何管理 Webpack 配置、开发服务器和构建命令。

各位靓仔靓女，晚上好！我是今晚的讲师，很高兴能在这里和大家一起扒一扒 Vue CLI 里面 service 这个模块的底裤，看看它是怎么把 Webpack 配置、开发服务器和构建命令玩弄于股掌之中的。准备好了吗？系好安全带，咱们开车啦！

一、vue-cli-service 模块的定位：你的私人订制 Webpack 管家

首先，我们需要明确 vue-cli-service 在 Vue CLI 整个体系中的角色。 简单来说，它就像一个高级管家，专门负责管理你的 Webpack 配置，启动开发服务器，以及执行各种构建任务。 它隐藏了 Webpack 繁琐的配置细节，让你只需要关注业务逻辑，而不用整天跟那些复杂的 Webpack 选项打交道。

二、Service 类的架构：总揽全局的掌舵者

vue-cli-service 的核心是 Service 类，它负责加载插件、解析配置、创建 Webpack 配置、启动开发服务器和构建项目。 可以把它想象成一个项目经理，负责协调各个部门（插件）的工作，最终完成项目的交付（构建）。

我们先来看一下 Service 类的主要成员：

成员变量	类型	说明
context	string	项目根目录的路径。
plugins	Array<Plugin>	一个包含所有已加载插件的数组。每个插件都是一个对象，包含 id (插件的 ID) 和 apply (插件的 apply 函数) 属性。
webpackChainFns	Array<Function>	一个包含所有 Webpack Chain 修改函数的数组。这些函数用于通过 webpack-chain 库修改 Webpack 配置。
webpackRawConfigFns	Array<Function>	一个包含所有 Webpack Raw 配置修改函数的数组。这些函数用于直接修改 Webpack 配置对象。
initialized	boolean	指示 Service 实例是否已经初始化。
mode	string	当前的运行模式，例如 development、production 或 test。
pkg	object	package.json 文件的内容。
projectOptions	object	vue.config.js 文件的内容，包含用户自定义的项目选项。

再来看看 Service 类的一些重要方法：

方法名	参数	说明
constructor	context: string, options: object	构造函数，接收项目根目录和选项对象作为参数。
init	mode?: string	初始化 Service 实例，加载插件、解析配置等。
run	command: string, args: object	运行指定的命令，例如 serve、build 等。
resolveWebpackConfig	...args: any[]	解析 Webpack 配置，包括应用插件、合并用户配置等。
resolvePlugin	id: string	解析插件的路径。
loadPlugin	id: string	加载指定的插件。

三、插件机制：灵活扩展的基石

Vue CLI 的插件机制是其强大的关键所在。通过插件，我们可以轻松地扩展 Vue CLI 的功能，例如添加 TypeScript 支持、集成 ESLint 等。

插件本质上就是一个包含 id 和 apply 函数的对象。 id 是插件的唯一标识符， apply 函数则会在 Service 实例初始化时被调用，用于注册插件的功能。

// 一个简单的插件示例
module.exports = {
  id: 'my-custom-plugin',
  apply: (api, options) => {
    // 在这里可以修改 Webpack 配置、添加命令等
    api.chainWebpack(config => {
      // 修改 Webpack 配置
      config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // ... 修改 vue-loader 的选项
          return options
        })
    })

    api.registerCommand('my-command', {
      description: 'A custom command',
      usage: 'vue-cli-service my-command',
      options: {
        '--foo': 'Foo option'
      }
    }, args => {
      console.log('Running my custom command with args:', args)
    })
  }
}

Service 类通过 loadPlugin 和 resolvePlugin 方法来加载和解析插件。 loadPlugin 方法会首先尝试从本地 node_modules 目录加载插件，如果找不到，则会尝试从全局 node_modules 目录加载。

四、Webpack 配置管理：webpack-chain 和 Raw 配置的双剑合璧

Vue CLI 提供了两种方式来修改 Webpack 配置：

1. webpack-chain: 一种基于链式调用的 API，允许你以更简洁、可读性更高的方式修改 Webpack 配置。
2. Raw 配置: 直接修改 Webpack 配置对象。

webpack-chain 更加灵活、易于维护，推荐使用。但是，对于一些复杂的配置，可能需要直接修改 Raw 配置才能实现。

// 使用 webpack-chain 修改 Webpack 配置
api.chainWebpack(config => {
  config.module
    .rule('vue')
    .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
      // ... 修改 vue-loader 的选项
      return options
    })
})

// 使用 Raw 配置修改 Webpack 配置
api.configureWebpack(config => {
  // 直接修改 Webpack 配置对象
  config.plugins.push(new MyCustomPlugin())
})

Service 类使用 webpackChainFns 和 webpackRawConfigFns 数组来存储这些修改函数。 在解析 Webpack 配置时，它会依次调用这些函数，并将修改后的配置合并到最终的 Webpack 配置中。

resolveWebpackConfig 方法会根据当前环境（development 或 production）和用户配置（vue.config.js）来生成最终的 Webpack 配置。 它会依次执行以下步骤：

1. 加载基础配置（例如 webpack.config.js）。
2. 应用插件，调用插件的 apply 函数，执行 api.chainWebpack 和 api.configureWebpack 注册的修改函数。
3. 合并用户配置（vue.config.js）中的 configureWebpack 选项。
4. 返回最终的 Webpack 配置。

五、开发服务器：热重载的幕后功臣

vue-cli-service 使用 webpack-dev-server 来提供开发服务器。 它会自动配置 webpack-dev-server，使其能够监听文件变化，并自动刷新浏览器。

启动开发服务器的命令是 vue-cli-service serve。 当你运行这个命令时，Service 类会执行以下步骤：

1. 解析 Webpack 配置。
2. 创建 webpack-dev-server 实例。
3. 启动 webpack-dev-server，监听指定端口。

webpack-dev-server 会使用 Webpack 的 watch 模式，监听文件变化。 当文件发生变化时，webpack-dev-server 会重新编译项目，并将更新后的代码推送到浏览器。 浏览器会自动刷新，显示最新的代码。

六、构建命令：打包发布的利器

构建命令是 vue-cli-service build。 当你运行这个命令时，Service 类会执行以下步骤：

1. 解析 Webpack 配置。
2. 使用 Webpack 编译项目。
3. 将编译后的文件输出到指定目录（默认为 dist 目录）。

构建过程会根据当前环境（production）进行优化，例如压缩代码、提取 CSS 等。

七、命令注册：扩展 CLI 的可能性

Service 类提供了 registerCommand 方法，允许插件注册自定义的 CLI 命令。

// 注册一个自定义命令
api.registerCommand('my-command', {
  description: 'A custom command',
  usage: 'vue-cli-service my-command',
  options: {
    '--foo': 'Foo option'
  }
}, args => {
  console.log('Running my custom command with args:', args)
})

registerCommand 方法接收三个参数：

1. command: 命令名称。
2. opts: 命令选项，包括 description、usage 和 options。
3. fn: 命令处理函数，接收命令参数作为参数。

通过 registerCommand 方法，你可以轻松地扩展 Vue CLI 的功能，例如添加自定义的代码生成器、部署脚本等。

八、代码示例：深入理解 Service 类

为了更好地理解 Service 类的工作原理，我们来看一个简化的 Service 类实现：

class Service {
  constructor(context, options) {
    this.context = context;
    this.options = options;
    this.plugins = [];
    this.webpackChainFns = [];
    this.webpackRawConfigFns = [];
    this.initialized = false;
  }

  init(mode) {
    if (this.initialized) {
      return;
    }
    this.mode = mode || process.env.NODE_ENV || 'development';
    // 加载插件
    this.loadPlugins();
    this.initialized = true;
  }

  loadPlugins() {
    // 这里简化了插件加载逻辑，实际实现会更复杂
    const plugins = [
      require('./plugins/vue'), // Vue 插件
      require('./plugins/eslint') // ESLint 插件
    ];

    plugins.forEach(plugin => {
      this.plugins.push(plugin);
      plugin.apply(this, this.options); // 执行插件的 apply 函数
    });
  }

  chainWebpack(fn) {
    this.webpackChainFns.push(fn);
  }

  configureWebpack(fn) {
    this.webpackRawConfigFns.push(fn);
  }

  resolveWebpackConfig() {
    let config = {}; // 基础 Webpack 配置

    // 应用 webpack-chain 修改函数
    this.webpackChainFns.forEach(fn => {
      const chain = require('webpack-chain')();
      fn(chain);
      config = chain.toConfig();
    });

    // 应用 Raw 配置修改函数
    this.webpackRawConfigFns.forEach(fn => {
      config = fn(config);
    });

    // 合并用户配置
    if (this.options.configureWebpack) {
      config = merge(config, this.options.configureWebpack); // 假设 merge 是一个合并对象的函数
    }

    return config;
  }

  run(command, args) {
    this.init();

    if (command === 'serve') {
      this.serve(args);
    } else if (command === 'build') {
      this.build(args);
    } else {
      console.error(`Unknown command: ${command}`);
    }
  }

  serve(args) {
    const webpackConfig = this.resolveWebpackConfig();
    const WebpackDevServer = require('webpack-dev-server');
    const webpack = require('webpack');

    const compiler = webpack(webpackConfig);
    const server = new WebpackDevServer(webpackConfig.devServer || {}, compiler);

    server.listen(8080, 'localhost', err => {
      if (err) {
        console.error(err);
      } else {
        console.log('Starting server on http://localhost:8080');
      }
    });
  }

  build(args) {
    const webpackConfig = this.resolveWebpackConfig();
    const webpack = require('webpack');

    webpack(webpackConfig, (err, stats) => {
      if (err) {
        console.error(err);
        return;
      }

      console.log(stats.toString({
        colors: true
      }));
    });
  }

  registerCommand(command, opts, fn) {
      // 实际实现会更复杂，这里只是一个示例
      console.log(`Registered command: ${command}`);
  }
}

module.exports = Service;

九、总结：service 模块的精髓

vue-cli-service 模块是 Vue CLI 的核心，它通过插件机制、Webpack 配置管理和命令注册等功能，为我们提供了一个灵活、可扩展的开发环境。 理解 service 模块的工作原理，可以帮助我们更好地定制 Vue CLI，满足项目的特殊需求。

好了，今天的讲座就到这里。希望大家有所收获！如果还有什么问题，欢迎提问。 咱们下次再见！