vite指令

99 阅读1分钟

vite的bin指令

新起一个vite的项目时,比如vue,package.json长这样

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "typescript": "~5.6.2",
    "vite": "^6.0.1",
    "vue-tsc": "^2.1.10"
  }

在运行dev的时候,会有个vite的指令 在执行build的时候,会有个vite build的指令 执行preview时,会有个vite preview指令 指令是在哪声明的呢?继续往下看

packages/vite/bin/vite.js

  "bin": {
    "vite": "bin/vite.js"
  },

vite指令是在package.json中的bin配置中声明的。 然后会执行bin/vite.js文件 bin/vite.js文件

// packages/vite/bin/vite.js
function start() {
  // ...
  return import('../dist/node/cli.js')
}

start()

继续去找dist/node/cli.js文件 dist/node/cli.js实际上是 packages/vite/src/node/cli.ts 编译过来的 所以实际上就是执行的 packages/vite/src/node/cli.ts 文件

// packages/vite/src/node/cli.ts
import { cac } from 'cac'
const cli = cac('vite')

// dev
cli
  .command('[root]', 'start dev server') // default command
  .action()

// build
cli
  .command('build [root]', 'build for production')
  .action()

// preview
cli
  .command('preview [root]', 'locally preview production build')
  .action()

cli.help()
cli.version(VERSION)
cli.parse()

删除了一些不相干的代码,可以看到,指令都是通过 cac 包实现的。 当执行vite指令时,会根据command执行对应的action

后面就可以一个一个的去学习了。 逐个击破。