vue-cli系列之vue-cli-service整体架构浅析_vue-cli-service资源-CSDN下载

版权申诉

22 浏览量 2020-12-07 11:32:18 上传评论收藏 68KB PDF 举报

资源推荐

资源详情

资源评论

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

概述概述

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')

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

版权申诉

weixin_38747126

粉丝: 5

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip