免費(fèi)AI編程助手
在開始接觸前端學(xué)習(xí)時(shí)相信不少的小伙伴都是在考慮要先學(xué)那個(gè)款架了，那么今天小編就來說說有關(guān)于“vue-cli-server使用機(jī)制”內(nèi)容吧！下面是小編收集整理的相關(guān)內(nèi)容希望對(duì)大家有所幫助！
一、入口
我們可以在package.json中看到npm run dev其實(shí)就是?vue-cli-service serve?，我們?cè)诎惭b?vue-cli?的時(shí)候可以一并將我們的?vue-cli-service?一同安裝，然后執(zhí)行?npm install vue-cli-service --save-dev?這樣就可以在?./node_modules/.bin?目錄下查看到?vue-cli-service?，相關(guān)代碼如下：
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
)
入口路徑：?./node_modules/@vue/cli-service/bin/vue-cli-service.js?。
我們還可以去看下我們的?vue-cli-service.js?核心代碼，如下所示：
const Service = require('../lib/Service')
// 實(shí)例化Service
// VUE_CLI_CONTEXT為undefined，所以傳入的值為process.cwd()及項(xiàng)目所在目錄
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
const rawArgv = process.argv.slice(2)
// minimist解析工具來對(duì)命令行參數(shù)進(jìn)行解析
const args = require('minimist')(rawArgv, {
boolean: [
// build
'modern',
'report',
'report-json',
'watch',
// serve
'open',
'copy',
'https',
// inspect
'verbose'
]
})
// {
// _: [ 'serve' ],
// modern: false,
// report: false,
// 'report-json': false,
// watch: false,
// open: false,
// copy: false,
// https: false,
// verbose: false ,
// }
const command = args._[0]
// 執(zhí)行service方法傳入:'serve'、agrs、['serve','--open',...]
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})二、初始化配置
代碼如下：
module.exports = class Service {
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
process.VUE_CLI_SERVICE = this
this.initialized = false
this.context = context
this.inlineOptions = inlineOptions
this.webpackChainFns = []
this.webpackRawConfigFns = []
this.devServerConfigFns = []
this.commands = {}
this.pkgContext = context
// 獲取package.json中的依賴
this.pkg = this.resolvePkg(pkg)
// 如果有內(nèi)聯(lián)插件，不使用package.json中找到的插件
// 最終得到的plugins為內(nèi)置插件+@vue/cli-plugin-*
// {id: 'xxx',apply: require('xxx')}
this.plugins = this.resolvePlugins(plugins, useBuiltIn)
// 解析每個(gè)命令使用的默認(rèn)模式
//{ serve: 'development',
// build: 'production',
// inspect: 'development' }
this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
return Object.assign(modes, defaultModes)
}, {})
}
// ......
}我們通過獲取package.json中的依賴，通過read-pkg這個(gè)包來讀取我們的package.json文件，并且通過json格式返回賦值給我們的this.pkg；之后初始化相關(guān)的插件。代碼如下：
resolvePlugins (inlinePlugins, useBuiltIn) {
const idToPlugin = id => ({
id: id.replace(/^.\//, 'built-in:'),
apply: require(id)
})
let plugins
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)
if (inlinePlugins) {
// ...
} else {
// 開發(fā)環(huán)境依賴+生產(chǎn)環(huán)境的依賴中，獲取cli-plugin-*插件
const projectPlugins = Object.keys(this.pkg.devDependencies || {})
.concat(Object.keys(this.pkg.dependencies || {}))
.filter(isPlugin) // 驗(yàn)證是否為vue-cli插件 cli-plugin-*
.map(idToPlugin)
plugins = builtInPlugins.concat(projectPlugins)
}
// ...
}1、通過初始化模式，從而解析每個(gè)命令，代碼如下：
// 解析每個(gè)命令使用的默認(rèn)模式
//{ serve: 'development',
// build: 'production',
// inspect: 'development' }
this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => {
return Object.assign(modes, defaultModes)
}, {})之后在內(nèi)聯(lián)插件默認(rèn)到處?defaultModes?這個(gè)文件如下所示：
// serve.js
module.exports.defaultModes = {
serve: 'development'
}三、解析命令參數(shù)
我們?cè)谶@邊通過?minimist?解析工具來對(duì)命令行參數(shù)進(jìn)行解析，如下所示：
const args = require('minimist')(rawArgv, {
boolean: [
// build
// serve
'open',
'copy',
'https',
]
})
// 'serve'、agrs、['serve','--open',...]四、加載插件
我們可以通過運(yùn)行service.run方法，加載環(huán)境變量，加載用戶配置，應(yīng)用插件，代碼如下：
async run (name, args = {}, rawArgv = []) {
const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])
// 加載環(huán)境變量，加載用戶配置，應(yīng)用插件
this.init(mode)
args._ = args._ || []
// 注冊(cè)完的命令集里獲取對(duì)應(yīng)的命令
let command = this.commands[name]
// ....
const { fn } = command
return fn(args, rawArgv)
}1、加載環(huán)境變量，我們從項(xiàng)目中的根目錄下的?.env.(mode)?文件讀取環(huán)境變量，并寫入到?process.env?（聲明環(huán)境變量必須是VUE_APP_*，不然會(huì)被過濾掉）代碼如下：
init (mode = process.env.VUE_CLI_MODE) {
// 加載development.env環(huán)境變量
if (mode) {
this.loadEnv(mode)
}
this.loadEnv()
// ...
}
// 加載環(huán)境變量方法（部分）
loadEnv (mode) {
// 項(xiàng)目路徑/.env.development
const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)
// 項(xiàng)目路徑/.env.development.local
const localPath = `${basePath}.local`
const load = path => {
const env = dotenv.config({ path, debug: process.env.DEBUG })
// 這里會(huì)先調(diào)用 dotenv（位于 node_modules/dotenv ）的 config 函數(shù)，最終會(huì)返回這樣的格式 { parsed: { YOUR_ENV_KEY: '你設(shè)定的環(huán)境變量值' } }，并且寫入到process.env里面
dotenvExpand(env)
logger(path, env)
}
load(localPath)
load(basePath)
if (mode) {
const defaultNodeEnv = (mode === 'production' || mode === 'test')
? mode
: 'development'
if (shouldForceDefaultEnv || process.env.NODE_ENV == null) {
process.env.NODE_ENV = defaultNodeEnv
}
}
}2、加載用戶配置
我們這個(gè)步驟通過讀取vue.config.js文件內(nèi)部的配置就可以了，代碼如下：
init (mode = process.env.VUE_CLI_MODE) {
// 加載用戶配置
const userOptions = this.loadUserOptions()
this.projectOptions = defaultsDeep(userOptions, defaults())
}3、應(yīng)用插件
//const idToPlugin = id => ({
// id: id.replace(/^.\//, 'built-in:'),
// apply: require(id)
//})
init (mode = process.env.VUE_CLI_MODE) {
// 應(yīng)用插件
this.plugins.forEach(({ id, apply }) => {
apply(new PluginAPI(id, this), this.projectOptions)
})
// 從項(xiàng)目配置文件中應(yīng)用webpack配置
if (this.projectOptions.chainWebpack) {
this.webpackChainFns.push(this.projectOptions.chainWebpack)
}
if (this.projectOptions.configureWebpack) {
this.webpackRawConfigFns.push(this.projectOptions.configureWebpack)
}
}
}通過前面初始化插件的時(shí)候(resolvePlugins方法)有一個(gè)apply屬性，調(diào)用這個(gè)方法就可以導(dǎo)入對(duì)應(yīng)的插件，這里就是調(diào)用了serve.js的方法。
4、注冊(cè)命令
我們?cè)谠趕ervice注冊(cè)serve命令，代碼如下：
// serve.js
api.registerCommand('serve', {
description: 'start development server',
usage: 'vue-cli-service serve [options] [entry]',
options: {}
}, async function serve (args) {
// ...
});五、配置啟動(dòng)服務(wù)
最后我們通過執(zhí)行的serve.js 內(nèi)注冊(cè)serve時(shí)傳遞的方法。然后等webpack?獲取到配置之后，在通過實(shí)例化Compiler 傳遞給webpackDevServer，通過webpackDevServer實(shí)現(xiàn)自動(dòng)編譯和更新，代碼如下：
// serve.js serve函數(shù)
async function serve (args) {
//創(chuàng)建webpack編譯器
const compiler = webpack(webpackConfig)
// compiler.run()即可完成一次編譯打包
// 創(chuàng)建本地服務(wù)
const server = new WebpackDevServer(compiler, Object.assign({
clientLogLevel: 'none',
historyApiFallback: {
disableDotRule: true,
rewrites: [
{ from: /./, to: path.posix.join(options.baseUrl, 'index.html') }
]
},
contentBase: api.resolve('public'),
watchContentBase: !isProduction,
hot: !isProduction,
quiet: true,
compress: isProduction,
publicPath: options.baseUrl,
overlay: isProduction // TODO disable this
? false
: { warnings: false, errors: true }
}, projectDevServerOptions, {
https: useHttps,
proxy: proxySettings,
}))
return new Promise((resolve, reject) => {
compiler.hooks.done.tap('vue-cli-service serve', stats => {
// ...
})
// ...
server.listen(port, host, err => {
if (err) {
reject(err)
}
})
})
}
我們?cè)谶@里獲取了?webpack?配置：?api.resolveWebpackConfig()?，之后在通過獲取 ?devServer? 配置 注入 ?webpack-dev-server ?和 ?hot-reload（HRM）?的中間件入口從而創(chuàng)建? webpack-dev-server? 實(shí)例
，而且在啟動(dòng)webpack-dev-server后，在目標(biāo)文件夾中是看不到編譯后的文件的,實(shí)時(shí)編譯后的文件都保存到了內(nèi)存當(dāng)中。
總結(jié)：
以上就是有關(guān)于“vue-cli-server使用機(jī)制”的相關(guān)內(nèi)容希望對(duì)大家有所幫助當(dāng)然如果你有更好的方法也可以和大家一起分享了解，更多有關(guān)于vue這方面的問題和相關(guān)知識(shí)我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。
