脚本宝典收集整理的这篇文章主要介绍了vue-cli系列之vue-cli自身引用了哪些包？持续更新中……，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

当vue-cli创建了一个vue-demo后，我们使用npm run serve就可以启动项目了。通过package.json中的serve命令我们可以看到，实际是启动了vue-cli-service serve这个命令。这个命令实际上是启动了一段node脚本，那这个脚本引用了哪些包呢？让我们来一探究竟。

SEMver

概述：这个包是用来做版本号规范处理的，可以校验一个输入的版本号是否符合规范，以及某个包是否满足某个版本。

实例:检测本机node版本是否符合vue-cli需求的node版本。

if (!semver.satisfies(PRocess.version, requiredVersion)) {
  error(
    `You are using Node ${process.version}, but vue-cli-service ` +
    `requires Node ${requiredVersion}.nPlease upgrade your Node version.`
  )
  process.exIT(1)
}

npm 链接：https://www.npmjs.com/package...

minimist

概述：这个包是用来处理命令行的参数输入的。

实例：检测命令行参数中是否有如下几个参数

const args = require('minimist')(rawArgv, {
  boolean: [
    // build
    'modern',
    'report',
    'report-json',
    'watch',
    // serve
    'oPEn',
    'copy',
    'https',
    // inspect
    'verbose'
  ]
})

npm链接：https://www.npmjs.com/package...

debug

概述： 一个轻量级的调试工具，根据参数返回一个打印错误的函数。看起来是可以让不同的错误输出更清晰，颜色很美。
实例: 为不同的错误创建不同的错误输出函数

const LOGger = debug('vue:env'); //调用该函数会输出以vue:env开头的字符串。
//...此处省略好多业务代码
debug('vue:project-config')(this.projectOptions) // 输出vue:project-config开头的字符串。

npm链接：https://www.npmjs.com/package...

chalk

概述：可以以不同的样式输出字符串到终端
实例：打印不一段字符串，其中关键字加粗

if (fileConfig) {
  if (pkgConfig) {
    warn(
      `"vue" field in package.JSON ignored ` +
      `due to presence of ${chalk.bold('vue.config.js')}.`
    )
    warn(
      `You should migrate it into ${chalk.bold('vue.config.js')} ` +
      `and remove it From package.json.`
    )
  }
  resolved = fileConfig
  resolveDFrom = 'vue.config.js'
}

npm链接：https://www.npmjs.com/package...

joi

概述：一个js类型&字段验证的库。类似schemas的概念。
实例：vue-cli中为了确保配置对象的正确性，定义了一个蓝本，去校验配置的正确性（主要是校验用户配置，例如vue.config.js中的输入）

const schema = createSchema(joi => joi.object({
  baseUrl: joi.string().allow(''),
  publicPath: joi.string().allow(''),
  outputDir: joi.string(),
  assetsDir: joi.string().allow(''),
  indexPath: joi.string(),
  filenameHashing: joi.boolean(),
  runtimeCompiler: joi.boolean(),
  transpileDependencies: joi.array(),
  productionSourceMap: joi.boolean(),
  parallel: joi.boolean(),
  devServer: joi.object(),
  pages: joi.object().pattern(
    /w+/,
    joi.alternatives().try([
      joi.string(),
      joi.object().keys({
        entry: joi.string().required()
      }).unknown(true)
    ])
  ),
  crossorigin: joi.string().valid(['', 'anonymous', 'use-credentials']),
  integrity: joi.boolean(),

  // css
  css: joi.object({
    modules: joi.boolean(),
    extract: joi.alternatives().try(joi.boolean(), joi.object()),
    sourceMap: joi.boolean(),
    loaderOptions: joi.object({
      css: joi.object(),
      sass: joi.object(),
      less: joi.object(),
      stylus: joi.object(),
      postcss: joi.object()
    })
  }),

  // webpack
  chainWebpack: joi.func(),
  configureWebpack: joi.alternatives().try(
    joi.object(),
    joi.func()
  ),

  // known runtime options for built-in plugins
  lintOnSave: joi.any().valid([true, false, 'error']),
  pwa: joi.object(),

  // 3rd party plugin options
  pluginOptions: joi.object()
}))

npm链接：https://www.npmjs.com/package...

lodash.defaultsDeep

概述：lodash这个包提供的一个函数，有点类似Object.assign()这个函数，可以用来默认参数填充。
实例：vue中，合并用户配置(vue.config.js)与默认配置。