最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue-cli系列之vue-cli-service整體架構(gòu)淺析

 更新時(shí)間:2019年01月14日 09:59:38   作者:A_大白  
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

概述

vue啟動(dòng)一個(gè)項(xiàng)目的時(shí)候,需要執(zhí)行npm run serve,其中這個(gè)serve的內(nèi)容就是vue-cli-service serve??梢?jiàn),項(xiàng)目的啟動(dòng)關(guān)鍵是這個(gè)vue-cli-service與它的參數(shù)serve。接下來(lái)我們一起看看service中主要寫(xiě)了什么東東(主要內(nèi)容以備注形式寫(xiě)到代碼中。)。

關(guān)鍵代碼

vue-cli-service.js

const semver = require('semver')
const { error } = require('@vue/cli-shared-utils')
const requiredVersion = require('../package.json').engines.node

// 檢測(cè)node版本是否符合vue-cli運(yùn)行的需求。不符合則打印錯(cuò)誤并退出。
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的核心類(lèi)。
const Service = require('../lib/Service')
// 新建一個(gè)service的實(shí)例。并將項(xiàng)目路徑傳入。一般我們?cè)陧?xiàng)目根路徑下運(yùn)行該cli命令。所以process.cwd()的結(jié)果一般是項(xiàng)目根路徑
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

// 參數(shù)處理。
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]

// 將參數(shù)傳入service這個(gè)實(shí)例并啟動(dòng)后續(xù)工作。如果我們運(yùn)行的是npm run serve。則command = "serve"。
service.run(command, args, rawArgv).catch(err => {
 error(err)
 process.exit(1)
})

Service.js

上面實(shí)例化并調(diào)用了service的run方法,這里從構(gòu)造函數(shù)到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
  // 一般是項(xiàng)目根目錄路徑。
  this.context = context
  this.inlineOptions = inlineOptions
  // webpack相關(guān)收集。不是本文重點(diǎn)。所以未列出該方法實(shí)現(xiàn)
  this.webpackChainFns = []
  this.webpackRawConfigFns = []
  this.devServerConfigFns = []
  //存儲(chǔ)的命令。
  this.commands = {}
  // Folder containing the target package.json for plugins
  this.pkgContext = context
  // 鍵值對(duì)存儲(chǔ)的pakcage.json對(duì)象,不是本文重點(diǎn)。所以未列出該方法實(shí)現(xiàn)
  this.pkg = this.resolvePkg(pkg)
  // **這個(gè)方法下方需要重點(diǎn)閱讀。**
  this.plugins = this.resolvePlugins(plugins, useBuiltIn)
  
  // 結(jié)果為{build: production, serve: development, ... }。大意是收集插件中的默認(rèn)配置信息
  // 標(biāo)注build命令主要用于生產(chǎn)環(huán)境。
  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()

  // 讀取用戶(hù)的配置信息.一般為vue.config.js
  const userOptions = this.loadUserOptions()
  // 讀取項(xiàng)目的配置信息并與用戶(hù)的配置合并(用戶(hù)的優(yōu)先級(jí)高)
  this.projectOptions = defaultsDeep(userOptions, defaults())

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

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

  // wepback相關(guān)配置收集
  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得到的每個(gè)插件都是一個(gè){id, apply的形式}
  // 其中require(id)將直接import每個(gè)插件的默認(rèn)導(dǎo)出。
  // 每個(gè)插件的導(dǎo)出api為
  // module.exports = (PluginAPIInstance,projectOptions) => {
  //  PluginAPIInstance.registerCommand('cmdName(例如npm run serve中的serve)', args => {
  //    // 根據(jù)命令行收到的參數(shù),執(zhí)行該插件的業(yè)務(wù)邏輯
  //  })
  //  // 業(yè)務(wù)邏輯需要的其他函數(shù)
  //}
  // 注意著里是先在構(gòu)造函數(shù)中resolve了插件。然后再run->init->方法中將命令,通過(guò)這里的的apply方法,
  // 將插件對(duì)應(yīng)的命令注冊(cè)到了service實(shí)例。
  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得處理。默認(rèn)生成的項(xiàng)目直接運(yùn)行時(shí)候,除了上述數(shù)組的插件['./commands/serve'...]外,還會(huì)有
  // ['@vue/cli-plugin-babel','@vue/cli-plugin-eslint','@vue/cli-service']。
  // 處理結(jié)果是兩者的合并,細(xì)節(jié)省略。
  if (inlinePlugins) {
    //...
  } else {
    //...默認(rèn)走這條路線
   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])

  // 收集環(huán)境變量、插件、用戶(hù)配置
  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()
  }
  // 執(zhí)行命令。例如vue-cli-service serve 則,執(zhí)行serve命令。
  const { fn } = command
  return fn(args, rawArgv)
 }

 // 收集vue.config.js中的用戶(hù)配置。并以對(duì)象形式返回。
 loadUserOptions () {
  // 此處代碼省略,可以簡(jiǎn)單理解為
  // require(vue.config.js)
  return resolved
 }
}

PluginAPI

這里主要是連接了plugin的注冊(cè)和service實(shí)例。抽象過(guò)的代碼如下

class PluginAPI {

 constructor (id, service) {
  this.id = id
  this.service = service
 }
 // 在service的init方法中
 // 該函數(shù)會(huì)被調(diào)用,調(diào)用處如下。
 // // apply plugins.
 // 這里的apply就是插件暴露出來(lái)的函數(shù)。該函數(shù)將PluginAPI實(shí)例和項(xiàng)目配置信息(例如vue.config.js)作為參數(shù)傳入
 // 通過(guò)PluginAPIInstance.registerCommand方法,將命令注冊(cè)到service實(shí)例。
 // 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

總結(jié)

通過(guò)vue-cli-service中的new Service,加載插件信息,緩存到Service實(shí)例的plugins變量中。

當(dāng)?shù)玫矫钚袇?shù)后,在通過(guò)new Service的run方法,執(zhí)行命令。

該run方法中調(diào)用了init方法獲取到項(xiàng)目中的配置信息(默認(rèn)&用戶(hù)的合并),例如用戶(hù)的配置在vue.config.js中。

init過(guò)程中通過(guò)pluginAPI這個(gè)類(lèi),將service和插件plugins建立關(guān)聯(lián)。關(guān)系存放到service.commands中。
最后通過(guò)commands[cmdArgName]調(diào)用該方法,完成了插件方法的調(diào)用。

初次閱讀,只是看到了命令模式的實(shí)際應(yīng)用。能想到的好就是,新增加一個(gè)插件的時(shí)候,只需要增加一個(gè)插件的文件,并不需要更改其他文件的邏輯。其他的部分,再慢慢體會(huì)吧。。。以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

华池县| 鹤庆县| 高台县| 疏附县| 铜梁县| 遂宁市| 延津县| 凤冈县| 巴南区| 尤溪县| 井陉县| 岑巩县| 闽侯县| 侯马市| 安宁市| 丰城市| 察哈| 营山县| 尉氏县| 西青区| 拉萨市| 桐乡市| 潼关县| 隆昌县| 新河县| 鄢陵县| 景洪市| 正蓝旗| 治县。| 米脂县| 乌兰浩特市| 蓬安县| 玛多县| 桂阳县| 二连浩特市| 台南县| 依安县| 江西省| 中方县| 东兴市| 海安县|