资讯专栏INFORMATION COLUMN

vue-cli系列之vue-cli-service整体架构浅析。

FrancisSoung / 2183人阅读

摘要:不符合则打印错误并退出。上面实例化并调用了的方法,这里从构造函数到一路浏览即可。每个插件的导出为例如中的根据命令行收到的参数,执行该插件的业务逻辑业务逻辑需要的其他函数注意着里是先在构造函数中了插件。并以对象形式返回。

概述

vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要内容以备注形式写到代码中。)。

关键代码 vue-cli-service.js
const semver = require("semver")
const { error } = require("@vue/cli-shared-utils")
const requiredVersion = require("../package.json").engines.node

// 检测node版本是否符合vue-cli运行的需求。不符合则打印错误并退出。
if (!semver.satisfies(process.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.
Please upgrade your Node version.`
  )
  process.exit(1)
}

// cli-service的核心类。
const Service = require("../lib/Service")
// 新建一个service的实例。并将项目路径传入。一般我们在项目根路径下运行该cli命令。所以process.cwd()的结果一般是项目根路径
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

// 参数处理。
const rawArgv = process.argv.slice(2)
const args = require("minimist")(rawArgv, {
  boolean: [
    // build
    "modern",
    "report",
    "report-json",
    "watch",
    // serve
    "open",
    "copy",
    "https",
    // inspect
    "verbose"
  ]
})
const command = args._[0]

// 将参数传入service这个实例并启动后续工作。如果我们运行的是npm run serve。则command = "serve"。
service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})
Service.js

上面实例化并调用了service的run方法,这里从构造函数到run一路浏览即可。

const fs = require("fs")
const path = require("path")
const debug = require("debug")
const chalk = require("chalk")
const readPkg = require("read-pkg")
const merge = require("webpack-merge")
const Config = require("webpack-chain")
const PluginAPI = require("./PluginAPI")
const loadEnv = require("./util/loadEnv")
const defaultsDeep = require("lodash.defaultsdeep")
const { warn, error, isPlugin, loadModule } = require("@vue/cli-shared-utils")

const { defaults, validate } = require("./options")

module.exports = class Service {
  constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
    process.VUE_CLI_SERVICE = this
    this.initialized = false
    // 一般是项目根目录路径。
    this.context = context
    this.inlineOptions = inlineOptions
    // webpack相关收集。不是本文重点。所以未列出该方法实现
    this.webpackChainFns = []
    this.webpackRawConfigFns = []
    this.devServerConfigFns = []
    //存储的命令。
    this.commands = {}
    // Folder containing the target package.json for plugins
    this.pkgContext = context
    // 键值对存储的pakcage.json对象,不是本文重点。所以未列出该方法实现
    this.pkg = this.resolvePkg(pkg)
    // **这个方法下方需要重点阅读。**
    this.plugins = this.resolvePlugins(plugins, useBuiltIn)
    
    // 结果为{build: production, serve: development, ... }。大意是收集插件中的默认配置信息
    // 标注build命令主要用于生产环境。
    this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
      return Object.assign(modes, defaultModes)
    }, {})
  }

  init (mode = process.env.VUE_CLI_MODE) {
    if (this.initialized) {
      return
    }
    this.initialized = true
    this.mode = mode

    // 加载.env文件中的配置
    if (mode) {
      this.loadEnv(mode)
    }
    // load base .env
    this.loadEnv()

    // 读取用户的配置信息.一般为vue.config.js
    const userOptions = this.loadUserOptions()
    // 读取项目的配置信息并与用户的配置合并(用户的优先级高)
    this.projectOptions = defaultsDeep(userOptions, defaults())

    debug("vue:project-config")(this.projectOptions)

    // 注册插件。
    this.plugins.forEach(({ id, apply }) => {
      apply(new PluginAPI(id, this), this.projectOptions)
    })

    // wepback相关配置收集
    if (this.projectOptions.chainWebpack) {
      this.webpackChainFns.push(this.projectOptions.chainWebpack)
    }
    if (this.projectOptions.configureWebpack) {
      this.webpackRawConfigFns.push(this.projectOptions.configureWebpack)
    }
  }


  resolvePlugins (inlinePlugins, useBuiltIn) {
    const idToPlugin = id => ({
      id: id.replace(/^.//, "built-in:"),
      apply: require(id)
    })

    let plugins
    
    
    // 主要是这里。map得到的每个插件都是一个{id, apply的形式}
    // 其中require(id)将直接import每个插件的默认导出。
    // 每个插件的导出api为
    // module.exports = (PluginAPIInstance,projectOptions) => {
    //    PluginAPIInstance.registerCommand("cmdName(例如npm run serve中的serve)", args => {
    //        // 根据命令行收到的参数,执行该插件的业务逻辑
    //    })
    //    //  业务逻辑需要的其他函数
    //}
    // 注意着里是先在构造函数中resolve了插件。然后再run->init->方法中将命令,通过这里的的apply方法,
    // 将插件对应的命令注册到了service实例。
    const builtInPlugins = [
      "./commands/serve",
      "./commands/build",
      "./commands/inspect",
      "./commands/help",
      // config plugins are order sensitive
      "./config/base",
      "./config/css",
      "./config/dev",
      "./config/prod",
      "./config/app"
    ].map(idToPlugin)
    
    // inlinePlugins与非inline得处理。默认生成的项目直接运行时候,除了上述数组的插件["./commands/serve"...]外,还会有
    // ["@vue/cli-plugin-babel","@vue/cli-plugin-eslint","@vue/cli-service"]。
    // 处理结果是两者的合并,细节省略。
    if (inlinePlugins) {
        //...
    } else {
        //...默认走这条路线
      plugins = builtInPlugins.concat(projectPlugins)
    }

    // Local plugins 处理package.json中引入插件的形式,具体代码省略。

    return plugins
  }

  async run (name, args = {}, rawArgv = []) {
    // mode是dev还是prod?
    const mode = args.mode || (name === "build" && args.watch ? "development" : this.modes[name])

    // 收集环境变量、插件、用户配置
    this.init(mode)

    args._ = args._ || []
    let command = this.commands[name]
    if (!command && name) {
      error(`command "${name}" does not exist.`)
      process.exit(1)
    }
    if (!command || args.help) {
      command = this.commands.help
    } else {
      args._.shift() // remove command itself
      rawArgv.shift()
    }
    // 执行命令。例如vue-cli-service serve 则,执行serve命令。
    const { fn } = command
    return fn(args, rawArgv)
  }

  // 收集vue.config.js中的用户配置。并以对象形式返回。
  loadUserOptions () {
    // 此处代码省略,可以简单理解为
    // require(vue.config.js)
    return resolved
  }
}
PluginAPI

这里主要是连接了plugin的注册和service实例。抽象过的代码如下

class PluginAPI {

  constructor (id, service) {
    this.id = id
    this.service = service
  }
  // 在service的init方法中
  // 该函数会被调用,调用处如下。
  // // apply plugins.
  // 这里的apply就是插件暴露出来的函数。该函数将PluginAPI实例和项目配置信息(例如vue.config.js)作为参数传入
  // 通过PluginAPIInstance.registerCommand方法,将命令注册到service实例。
  //  this.plugins.forEach(({ id, apply }) => {
  //    apply(new PluginAPI(id, this), this.projectOptions)
  //  })
  registerCommand (name, opts, fn) {
    if (typeof opts === "function") {
      fn = opts
      opts = null
    }
    this.service.commands[name] = { fn, opts: opts || {}}
  }


}

module.exports = PluginAPI
总结

通过vue-cli-service中的new Service,加载插件信息,缓存到Service实例的plugins变量中。
当得到命令行参数后,在通过new Service的run方法,执行命令。
该run方法中调用了init方法获取到项目中的配置信息(默认&用户的合并),例如用户的配置在vue.config.js中。
init过程中通过pluginAPI这个类,将service和插件plugins建立关联。关系存放到service.commands中。
最后通过commands[cmdArgName]调用该方法,完成了插件方法的调用。

初次阅读,只是看到了命令模式的实际应用。能想到的好就是,新增加一个插件的时候,只需要增加一个插件的文件,并不需要更改其他文件的逻辑。其他的部分,再慢慢体会吧。。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100978.html

相关文章

  • vue-cli系列vue-cli自身引用了哪些包?持续更新中……

    摘要:概述当创建了一个后,我们使用就可以启动项目了。这个命令实际上是启动了一段脚本,那这个脚本引用了哪些包呢让我们来一探究竟。实例检测本机版本是否符合需求的版本。链接概述这个包是用来处理命令行的参数输入的。设置检查范围的起始端口号。 概述 当vue-cli创建了一个vue-demo后,我们使用npm run serve就可以启动项目了。通过package.json中的serve命令我们可以看...

    LiuRhoRamen 评论0 收藏0
  • 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    摘要:从使用和也是支持的。此处直接首页其中当时,内的配置信息会直接覆盖初始化后项目中的。文件接下来就是,这个文件负责的就是注入或是修改项目中文件。比如我的其中和就是用户在处理中设定的问题的回答值。 vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cl...

    Jokcy 评论0 收藏0
  • 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    摘要:从使用和也是支持的。此处直接首页其中当时,内的配置信息会直接覆盖初始化后项目中的。文件接下来就是,这个文件负责的就是注入或是修改项目中文件。比如我的其中和就是用户在处理中设定的问题的回答值。 vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cl...

    desdik 评论0 收藏0
  • 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    摘要:从使用和也是支持的。此处直接首页其中当时,内的配置信息会直接覆盖初始化后项目中的。文件接下来就是,这个文件负责的就是注入或是修改项目中文件。比如我的其中和就是用户在处理中设定的问题的回答值。 vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cl...

    MAX_zuo 评论0 收藏0
  • vue-cli3 配置开发-测试环境

    摘要:实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码。这样配置好之后,只要执行,它会自动先执行正式环境构建打包,完成之后再自动执行测试环境的构建打包,是方便接着再配置自动压缩,这里就需要使用到一个的插件。 需求 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测...

    Scott 评论0 收藏0

发表评论

0条评论

FrancisSoung

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<