vue cli3源码解析

vue-cli3 源码解析

脚手架代码入口点

从package.json文件中可以看到"vue-cli-service": "bin/vue-cli-service.js"
目录结构

Service.js 指令、配置文件管理类 new Service(context)

constructor (context, {
    plugins, pkg, inlineOptions, useBuiltIn } = {
   }){
   
    // ...
}

PluginAPI.js 指令api,new PluginAPI(id, service)

//service是Service.js导出的实例对象
constructor (id, service) {
   
    this.id = id
    this.service = service
}
// 在init方法中初始化PluginAPI的方法从这段代码中可以看出循环初始化PluginAPI的参数service都是同一个this
// 使用了单例模式，使多个PluginAPI实例的service指向同一个Service实例
this.plugins.forEach(({
    id, apply }) => {
   
    apply(new PluginAPI(id, this), this.projectOptions)
})

options.js 参数配置项

commands

// 指令目录这个目录下返回的都是一个函数function(api,options) api是PluginAPI实例，options是项目配置
module.exports = (api, options) =>{
   
    //...
}
// 指令对应的webpack模式
module.exports.defaultModes = {
   
  inspect: 'development'
}

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

this.modes = this.plugins.reduce((modes, {
    apply: {
    defaultModes }}) => {
   
    return Object.assign(modes, defaultModes)
}, {
   })

build
help.js
inspect.js
serve.js

config 各种开发模式下需要配置的的插件

// 指令目录这个目录下返回的都是一个函数function(api,options) api是PluginAPI实例，options是项目配置
module.exports = (api, options) =><