乐趣区

关于vue-cli4:源码vuecli459一

jiezi

vue -V产生过程

入口文件

文件门路：/packages/@vue/cli/bin/vue.js

checkNodeVersion

运行 vue.js，第一步就是校验 Node 版本是否合乎 package.json 中的engines.node 的 node 版本。

const requiredVersion = require('../package.json').engines.node

function checkNodeVersion (wanted, id) {if (!semver.satisfies(process.version, wanted, { includePrerelease: true})) {
    console.log(chalk.red(
      'You are using Node' + process.version + ', but this version of' + id +
      'requires Node' + wanted + '.\nPlease upgrade your Node version.'
    ))
    process.exit(1)
  }
}

checkNodeVersion(requiredVersion, '@vue/cli')

其中 npm 包 semver 的satisfies办法校验版本是否合乎，若不合乎则退出运行过程。

随后判断 Node 版本若不是 LTS 版本，则正告用户降级。

const EOL_NODE_MAJORS = ['8.x', '9.x', '11.x', '13.x']
for (const major of EOL_NODE_MAJORS) {if (semver.satisfies(process.version, major)) {
    console.log(chalk.red(`You are using Node ${process.version}.\n` +
      `Node.js ${major} has already reached end-of-life and will not be supported in future major releases.\n` +
      `It's strongly recommended to use an active LTS version instead.`
    ))
  }
}

commander 执行命令行输出

commander是一个笨重的 nodejs 模块，提供了用户命令行输出和参数解析弱小性能。具体能够见上面的参考文章

const program = require('commander')

program
  .version(`@vue/cli ${require('../package').version}`)
  .usage('<command> [options]')

program
  .command('create <app-name>')
  // 省略 options
  ...
program
  .command('add <plugin> [pluginOptions]')
  // 省略前面代码，待具体分析
  ...
program.parse(process.argv)

vue -V会触发 commander 的 version 函数，输入 package.json 的version属性。

此外，commander 还监听执行 14 个命令，前面会具体分析几个重要的命令

总结

简略介绍了命令行工具 vue/@cli 执行 vue -V 的过程，首先会查看运行的 node 版本是否合乎需要，而后通过 commander 来解析执行命令行输出。最初再简略介绍了 vue/cli 还绑定的 14 个命令行。其中 chalk 和commander作为 cli 罕用的开发工具须要熟练掌握，同时也须要理解 process 的相干 api，例如 process.version 获取 node 版本等。

参考文章

  • commander.js 官网中文文档
  • semver
  • chalk
退出移动版