时间:2021-05-26
概述
vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要内容以备注形式写到代码中。)。
关键代码
vue-cli-service.js
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]调用该方法,完成了插件方法的调用。
初次阅读,只是看到了命令模式的实际应用。能想到的好就是,新增加一个插件的时候,只需要增加一个插件的文件,并不需要更改其他文件的逻辑。其他的部分,再慢慢体会吧。。。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了vue使用vue-cli快速创建工程,分享给大家,具体如下:vue-cli安装npmivue-cli-gvueinitwebpack-simplevu
vue-cli是vue.js的脚手架,用于自动生成vue.js模板工程的。1、安装vue-cli使用npm全局安装vue-cli(前提是已经安装了nodejs,
vue-cli脚手架工具快速构建项目架构:。。首先默认了有已经安装了node。。。npminstall-gvue-cli全局安装vue-clivueinitwe
一:环境搭建使用vue-cli脚手架工具构建安装vue-clinpminstall-gvue-cli使用vue-cli初始化项目vueinitdemo1进到目录
本文实例讲述了Vue-CLI与Vuex使用方法。分享给大家供大家参考,具体如下:1、通过Vue-CLI创建项目Vue-CLI是Vue用于创建Vue项目的脚手架工