Vue脚手架创建的项目的启动流程

当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析。

入口分析

首先从package.json中的脚本配置来看，npm run serve调用的是vue-cli-service serve命令。

这个时候就应该来到node_modules中的.bin查找vue-cli-service.js文件。
但是在vue-cli-service.js文件中有一句代码const Service = require(’…/lib/Service’)，但是根据这个路径是找不到这个文件的。那么这个文件在哪里呢？
其实真正入口在node_modules/@vue/cli-service/bin/vue-cli-service.js。

那在vue-cli-service.js中到底做了什么事呢？

核心逻辑：
1、初始化Service
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())2、调用service的run方法
service.run(command, args, rawArgv)

Service构造函数分析

1、初始化一些内置参数
2、读取package.json中的配置信息 this.resolvePkg(pkg)
3、读取插件信息 this.resolvePlugins(plugins, useBuiltIn)

this.resolvePlugins函数到底做了什么事呢？

1、加载builtInPlugins插件(比如当前目录下的’./commands/serve’,’./commands/build’等），然后把各个插件中导出的函数挂载到apply字段中


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/prod','./config/app'
].map(idToPlugin)// 说明：apply等于各个插件中导出的函数
apply = module.exports = (api, options) => {}

2、加载package.json中devDependencies配置的插件,同样将导出的函数挂载到apply

const projectPlugins = Object.keys(this.pkg.devDependencies || {})
...

3、加载本地插件
4、合并所有插件并返回

plugins = builtInPlugins.concat(projectPlugins)
plugins = plugins.concat(files.map(file => ({id: `local:${file}`,apply: loadModule(`./${file}`, this.pkgContext)
})))

到这里构造函数做的事情已经完毕了。

Service.run方法分析

1、根据参数加载需要过滤的插件 this.setPluginsToSkip(args)
2、this.init(mode)
3、从this.commands中取出fn函数并执行

let command = this.commands[name]
const { fn } = command
return fn(args, rawArgv)

this.init(mode)方法详细分析：

1、根据mode读取环境配置this.loadEnv(mode)
2、读取基本的环境配置this.loadEnv()
3、loadUserOptions(),加载vue.config.js和vue.config.cjs中的配置
4、遍历所有插件然后执行

this.plugins.forEach(({ id, apply }) => {if (this.pluginsToSkip.has(id)) returnapply(new PluginAPI(id, this), this.projectOptions)
})

5、加载一些其他配置

apply(new PluginAPI(id, this), this.projectOptions)这个函数做了什么事情呢？
1、创建PluginAPI实例，传入插件名称和Service的实例
2、根据上面分析，apply()就是调用插件导出的函数

这里以第一个插件"./commands/serve"来分析说明：

// serve.js
api.registerCommand('serve', {},async function serve (args) {})// PluginAPI.js
registerCommand (name, opts, fn) {if (typeof opts === 'function') {fn = optsopts = null}this.service.commands[name] = { fn, opts: opts || {}}
}

serve插件调用apply()函数就是调用PluginAPI中的registerCommand函数。

1、根据以上第5步分析，this.service = Service
2、相当于在Service的commands对象中存储了一个"serve" = serve (args) {}键值对。

回到Service.run的最后一步就是执行的这里填入的方法。

serve插件为例：
fn(args, rawArgv) = async function serve (args) {}

那serve函数中就是一些关于开发环境中资源的加载、webpack的编译、WebpackDevServer的创建等的操作。

其他加载的插件也是这么分析的，可以根据不同文件的具体实现了解里面的操作。

终上所述：
下面是Vue脚手架项目启动过程解析思维导图

高清无码大图下载

Vue脚手架创建的项目的启动流程相关推荐

Vue脚手架创建TS项目
What is TS? TS语言,也就是TypeScript,是前端一个非常强大的语言超集,基于JavaScript. TS的强大吸引了许许多多的前端开发者学习使用. TS最大的特点,就是在JavaS ...
Vue脚手架创建项目流程
Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd, 按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd 输入vue ui 会自己在浏览器打开点击创建项目项目文件 ...
【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
[Vue]-Vue脚手架创建项目时的 linter / formatter config配置选择 ESLint with error prevention only 只进行报错提醒 ESLint + ...
7004.vue脚手架快速生成项目
文章目录 1 Vue脚手架可以快速生成Vue项目基础的架构. 1.1 安装3.x版本的Vue脚手架: 1.2基于3.x版本的脚手架创建Vue项目: 1.3 分析Vue脚手架生成的项目结构 2 vue脚 ...
SSM项目的启动流程深入解析
1 环境说明本文的内容基于Tomcat9.0.10.Spring 4.3 2 Tomcat加载应用的顺序在我们正式介绍SSM项目是怎么启动之前,我们要先来简单介绍一下Tomcat.很多人在介绍To ...
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案
nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案参考文章: (1)nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案 (2)https://www.cnblogs.com/jk ...
Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
基于脚手架创建react项目
React(一)使用脚手架创建React项目: 转自: https://www.cnblogs.com/yulingjia/p/9583244.html D:\workbench_ws>npm ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...

Vue脚手架创建的项目的启动流程

Vue脚手架创建的项目的启动流程

Vue脚手架创建的项目的启动流程相关推荐

最新文章

热门文章