day1

scripts脚本命令触发至：@vue/cli-service/bin/vue-cli-service.js

//获取参数；
//前两个参数分别为node环境地址；运行的js文件地址；
const rawArgv = process.argv.slice(2);
/*利用minimist获取启动参数*/
var args = require('minimist')(process.argv.slice(2))

将参数解析为布尔类型；
var args = require(‘minimist’)(process.argv.slice(2), {
boolean: [‘hello’]
});

例：

node xxx.js --a
//args.a=true;
node xxx.js --a a
//args.a=a;
node xxx.js --a=1
//args.a=1;
**使用=传值是不能有空格**

输入npm run dev 启动时

1、调用 resolvePkg 获取package.json内容；
2、调用resolvePlugins 拿到包含package。json及commands、config文件内所有pugin；
3、调用run方法加在配置、插件等。并启动。

1获取package.json内容

this.pkg = this.resolvePkg(pkg)resolvePkg(inlinePkg, context = this.context) {if (inlinePkg) {return inlinePkg}// 读取package.jsonconst pkg = resolvePkg(context)// 判断package.json中的键值对。if (pkg.vuePlugins && pkg.vuePlugins.resolveFrom) {this.pkgContext = path.resolve(context, pkg.vuePlugins.resolveFrom)return this.resolvePkg(null, this.pkgContext)}return pkg}

2、加载所有模块

this.plugins = this.resolvePlugins(plugins, useBuiltIn)resolvePlugins(inlinePlugins, useBuiltIn) {const idToPlugin = id => ({// './asd/asdf  => built-in:/asd/asdf'id: id.replace(/^.\//, 'built-in:'),apply: require(id)// id: built-in:/commands/serve// apply: require('./commands/serve)})let plugins------------------------return plugins；/**plugins: [{id: 'built-in:commands/serve',apply: [Function] { defaultModes: [Object] }      },{id: 'built-in:commands/build',apply: [Function] { defaultModes: [Object] }      },{id: 'built-in:commands/inspect',apply: [Function] { defaultModes: [Object] }      },{ id: 'built-in:commands/help', apply: [Function] },{ id: 'built-in:config/base', apply: [Function] },  { id: 'built-in:config/css', apply: [Function] },   { id: 'built-in:config/prod', apply: [Function] },  { id: 'built-in:config/app', apply: [Function] },   { id: '@vue/cli-plugin-babel', apply: [Function] }, { id: '@vue/cli-plugin-pwa', apply: [Function] },   { id: '@vue/cli-plugin-router', apply: [Function] } ]*/

3、加载所有模式

this.modes = this.plugins.reduce((modes, {apply: {defaultModes}}) => {return Object.assign(modes, defaultModes)}, {})
//modes: { serve: 'development', build: 'production', inspect: 'development' }

4、调用servicerun方法；启动；

service.run(command, args, rawArgv).catch(err => {error(err)process.exit(1)
})
/**
command: serve  //启动指令；
args: {     // 启动参数；_: [ 'serve' ],......mode: 'dev'
}
rawArgv: [ 'serve', '--mode', 'dev' ] //启动参数；
*/

run方法的执行

async run(name, args = {}, rawArgv = []) {// 配置中有无声明模式，默认为development；const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name])// --skip-plugins arg may have plugins that should be skipped during init()this.setPluginsToSkip(args)// load env variables, load user config, apply pluginsthis.init(mode) let command = this.commands[name] args._.shift() // remove command itselfrawArgv.shift() const {fn} = commandconsole.log('command:', command)return fn(args, rawArgv)}

init 方法；

this.loadEnv(mode)；
// 获取、设置全局process.env.node_env;如果不是production || test ,全部替换为development；loadUserOptions（）；//加载vue.config.js 中的所有内容；//然后合并：node_modules\@vue\cli-service\lib\options.js// ``````````````````````this.plugins.forEach(({id,apply}) => {if (this.pluginsToSkip.has(id)) returnapply(new PluginAPI(id, this), this.projectOptions)})// 循环加载PluginAPI 实例；将plugin和config挂载到实例；if (this.projectOptions.chainWebpack) {this.webpackChainFns.push(this.projectOptions.chainWebpack)}// 合并；init结束

vue/cli4、webpack 简阅（希望能持续更新）相关推荐

Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
针对Vue的后台权限功能实现思路(持续更新)
2019独角兽企业重金招聘Python工程师标准>>> 权限是一块设计挺繁琐的功能,尤其是设计到前端SPA应用,前后端的耦合性太强,先屡屡思路,再实现,如果您有好的建议,也可评论留言 ...
JS 小程序 Vue 2022年最全面试题！持续更新
vue面试题核心原理部分 mvc mvvm和mvp的区别? MVVM 就是 Model-View-ViewModel 的缩写,MVVM 将视图和业务逻辑分开. View:视图层,Model 数据模型 ...
vue init webpack缺少标识符_Vue脚手架热更新技术探秘
前言热替换(Hot Module Replacement)或热重载(Hot Reload)是指在不停机状态下,实时更新,在前端利于来说,在各大框架中及库中都有体现,比如NG从5开始就提供了热更新,R ...
vue开发常用css，js（持续更新）
目录 1.文字溢出显示三个点 2.input 框光标左边距 3.水平垂直居中常用写法 1)position属性实现 2)flex属性实现 4.input框消除空格 5.纯css实现箭头 6.箭头在上面 ...
Vue经典面试题及答案汇总(持续更新）
1.虚拟DOM中key的作用: key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM],随后Vue进行[新虚拟DOM]的差异比较,比较规则如下: ...
前端js vue遇到的一些简单的数据处理-持续更新
1. 数据处理: 直接从后台返回数据取出自己想要的属性,并将其修改成自己想要的属性名: list - 为需要处理的数组 value label: 是想要需要的属性名 item.nichname ite ...
Vue的各种杂乱知识点整理（持续更新中...）
2021-09-17(安卓系统和ios系统时间格式的差异) 例:2021-09-17 在安卓系统中正常,在ios系统中报错. 在安卓中 yyyy-MM-dd 和 yyyy/MM/dd 的时间格式都支持 ...
vue引入全局静态变量_vue-cli4 全面配置(持续更新)
https://github.com/staven630/vue-cli4-configgithub.com vue-cli4 全面配置(持续更新) 细致全面的 vue-cli4 配置信息.涵盖了使 ...

vue/cli4、webpack 简阅（希望能持续更新）

day1

1获取package.json内容

2、加载所有模块

3、加载所有模式

4、调用servicerun方法；启动；

run方法的执行

vue/cli4、webpack 简阅（希望能持续更新）相关推荐

最新文章

热门文章