Shulou(Shulou.com)06/03 Report--

This article is to share with you the content of an example analysis of the overall vue-cli-service architecture of the vue-cli series. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Overview

When vue starts a project, you need to execute npm run serve, where the content of the serve is vue-cli-service serve. As you can see, the key to starting the project is this vue-cli-service and its parameter serve.

Key code

Vue-cli-service.js

Const semver = require ('semver') const {error} = require (' @ vue/cli-shared-utils') const requiredVersion = require ('.. / package.json'). Engines.node// checks whether the node version meets the requirements for vue-cli to run. If it does not match, print the error and exit. If (! semver.satisfies (process.version, requiredVersion)) {error (`You are using Node ${process.version}, but vue-cli-service `+ `requires Node ${requiredVersion}.\ nPlease upgrade your Node version.`) process.exit (1)} / / cli-service. Const Service = require ('.. / lib/Service') / / create a new instance of service. And pass in the project path. Normally we run the cli command under the project root path. So the result of process.cwd () is generally the project root path const service = new Service (process.env.VUE_CLI_CONTEXT | | process.cwd ()) / / parameter processing. 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] / / pass parameters into service instance and start subsequent work. If we are running npm run serve. Then command = "serve". Service.run (command, args, rawArgv) .catch (err = > {error (err) process.exit (1)})

Service.js

The above instantiates and calls the run method of service, which can be browsed all the way from the constructor to 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 (' @ require) Validate} = require ('. / options') module.exports = class Service {constructor (context, {plugins, pkg, inlineOptions, useBuiltIn} = {}) {process.VUE_CLI_SERVICE = this this.initialized = false / / is generally the project root path. This.context = context this.inlineOptions = inlineOptions / / webpack related collection. That's not the point of this article. Therefore, the command that this method implements this.webpackChainFns = [] this.webpackRawConfigFns = [] this.devServerConfigFns = [] / / is not listed. This.commands = {} / / Folder containing the target package.json for plugins this.pkgContext = context / / key-value pair for stored pakcage.json objects is not the focus of this article. Therefore, the implementation of this method this.pkg = this.resolvePkg (pkg) / / * * is not listed, which needs to be read below. * * this.plugins = this.resolvePlugins (plugins, useBuiltIn) / / the result is {build: production, serve: development,...}. The default configuration information / / annotate build command in the collection plug-in is mainly used in production environments. 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 / / load the configuration if (mode) {this.loadEnv (mode)} / / load base .env this.loadEnv () / / read the user's configuration information. Generally, vue.config.js const userOptions = this.loadUserOptions () / / reads the configuration information of the project and merges it with the configuration of the user (user's priority is high) this.projectOptions = defaultsDeep (userOptions, defaults ()) debug ('vue:project-config') (this.projectOptions) / / registers the plug-in. This.plugins.forEach (({id, apply)) = > {apply (new PluginAPI (id, this), this.projectOptions)}) / / wepback related configuration collection 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 / / mainly here. Each plug-in obtained by map is a {id, in the form of apply} / / where require (id) will directly import the default export of each plug-in. / / the export api of each plug-in is / / module.exports = (PluginAPIInstance,projectOptions) = > {/ / PluginAPIInstance.registerCommand ('cmdName (for example, serve in npm run serve)', args = > {/ execute the plug-in's business logic / /} according to the parameters received on the command line) / other functions required by the business logic / Note that the plug-in is first resolve in the constructor. Then register the commands in the run- > init- > method, and / / register the commands corresponding to the plug-in to the service instance through the apply method here. 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 and non-inline. The default generated project runs directly, except for the plug-ins of the above array ['. / commands/serve'...] In addition, there will be / / ['@ vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-service']. / / the result is a combination of the two, with details omitted. If (inlinePlugins) {/ /...} else {/ /. By default, this route plugins = builtInPlugins.concat (projectPlugins)} / / Local plugins deals with the form of plug-ins introduced in package.json, with the specific code omitted. Return plugins} async run (name, args = {}, rawArgv = []) {/ / mode is dev or prod? Const mode = args.mode | | (name = = 'build' & & args.watch? 'development': this.modes [name]) / / collect environment variables, plug-ins, User configuration this.init (mode) args._ = args._ | [] let command = this.commands [name] if (! command & & name) {error (`command "${name}" does not room.`) process.exit (1)} if (! command | | args.help) {command = this.commands.help} else {args._.shift () / / remove command itself rawArgv.shift ()} / / execute the command. For example, vue-cli-service serve, execute the serve command. Const {fn} = command return fn (args, rawArgv)} / / collect the user configuration in vue.config.js. And returns as an object. LoadUserOptions () {/ / the code is omitted here, which can be simply understood as / / require (vue.config.js) return resolved}}.

PluginAPI

Here is mainly the connection between the registration of plugin and the instance of service. The abstract code is as follows

Class PluginAPI {constructor (id, service) {this.id = id this.service = service} / / in the init method of service / / this function is called as follows. / apply plugins. / / the apply here is the function exposed by the plug-in. This function passes in / / through the PluginAPIInstance.registerCommand method the PluginAPI instance and project configuration information (such as vue.config.js) as arguments, registering the command with the service instance. / / 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 Thank you for reading! This is the end of this article on "sample Analysis of the vue-cli-service overall Architecture of the vue-cli Series". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.