Vue.js脚手架@vue-cli是如何打包的

本文详细介绍了Vue.js项目如何使用@vue-cli进行打包。从解析package.json开始,深入到vue-cli-service的运行机制,包括minimist处理命令行参数,Service.js中的command对象,以及在PluginAPI.js中注册的指令。重点讲述了build命令的实际执行,通过lib/commands/build/index.js调用webpack,具体配置在resolveAppConfig.js中,最后利用webpack的ModernModePlugin完成打包,整个过程中@vue/cli并不会生成显式的webpack配置文件。
摘要由CSDN通过智能技术生成

首先,要有一个使用@vue-cli打包的Vue.js项目,参考:https://blog.csdn.net/Z_ammo/article/details/103915494

根据package.json的设置:

// 截取package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

打包使用的是vue-cli-service,于是我们找到node_modules/@vue/cli-service(以下操作均在该路径下

打开主文件:/bin/vue-cli-service.js

// 部分截取
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const rawArgv = process.argv.slice(2)
// 获取指令参数
const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'inline-vue',
    'watch',
    // serve
    'open',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})
// 获取指令
const command = args._[0]

service.run(command, args, rawArgv).catch(err => {
  error(err)
  process.exit(1)
})

首先解释一下:minimist是一个用于处理控制台调用node时的各种参数的模块,其具体使用细节可以参考:https://blog.csdn.net/Z_ammo/article/details/103930392

可以看到还调用了另一个模块Service的run方法

打开lib/Service.js

// Service.run()方法截取
async run (name, args = {}, rawArgv = []) {
  const mode 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值