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.json
const 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 plugins
this.init(mode)
let command = this.commands[name]
args._.shift() // remove command itself
rawArgv.shift()
const {
fn
} = command
console.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)) return
apply(new PluginAPI(id, this), this.projectOptions)
})
// 循环加载PluginAPI 实例;将plugin和config挂载到实例;
if (this.projectOptions.chainWebpack) {
this.webpackChainFns.push(this.projectOptions.chainWebpack)
}
// 合并;init结束