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

Z_ammo

于 2020-01-11 16:18:43 发布

阅读量960

点赞数

本文链接：https://blog.youkuaiyun.com/Z_ammo/article/details/103930091

版权

本文详细介绍了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配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，要有一个使用@vue-cli打包的Vue.js项目，参考：https://blog.youkuaiyun.com/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.youkuaiyun.com/Z_ammo/article/details/103930392

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

打开lib/Service.js

// Service.run()方法截取
async run (name, args = {}, rawArgv = []) {
  const mode

最低0.47元/天解锁文章