vue-cli系列之vue-cli自身引用了哪些包?持續更新中……

概述

當vue-cli建立了一個vue-demo後,咱們使用npm run serve就能夠啓動項目了。經過package.json中的serve命令咱們能夠看到,實際是啓動了vue-cli-service serve這個命令。這個命令其實是啓動了一段node腳本,那這個腳本引用了哪些包呢?讓咱們來一探究竟。javascript

semver

概述:這個包是用來作版本號規範處理的,能夠校驗一個輸入的版本號是否符合規範,以及某個包是否知足某個版本。css

實例:檢測本機node版本是否符合vue-cli需求的node版本。html

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...vue

minimist

概述:這個包是用來處理命令行的參數輸入的。java

實例:檢測命令行參數中是否有以下幾個參數node

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

npm連接:https://www.npmjs.com/package...webpack

debug

概述: 一個輕量級的調試工具,根據參數返回一個打印錯誤的函數。看起來是能夠讓不一樣的錯誤輸出更清晰,顏色很美。
實例: 爲不一樣的錯誤建立不一樣的錯誤輸出函數web

const logger = debug('vue:env'); //調用該函數會輸出以vue:env開頭的字符串。
//...此處省略好多業務代碼
debug('vue:project-config')(this.projectOptions) // 輸出vue:project-config開頭的字符串。

npm連接:https://www.npmjs.com/package...vue-cli

chalk

概述:能夠以不一樣的樣式輸出字符串到終端
實例:打印不一段字符串,其中關鍵字加粗npm

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)與默認配置。

// lodash官方案例:
_.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } });
// => { 'a': { 'b': 2, 'c': 3 } }
// vue-cli中的應用
this.projectOptions = defaultsDeep(userOptions, defaults());
// 這裏貼上vue-cli的默認配置
exports.defaults = () => ({
  // project deployment base
  publicPath: '/',

  // where to output built files
  outputDir: 'dist',

  // where to put static assets (js/css/img/font/...)
  assetsDir: '',

  // filename for index.html (relative to outputDir)
  indexPath: 'index.html',

  // whether filename will contain hash part
  filenameHashing: true,

  // boolean, use full build?
  runtimeCompiler: false,

  // deps to transpile
  transpileDependencies: [/* string or regex */],

  // sourceMap for production build?
  productionSourceMap: !process.env.VUE_CLI_TEST,

  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: hasMultipleCores(),

  // multi-page config
  pages: undefined,

  // <script type="module" crossorigin="use-credentials">
  // #1656, #1867, #2025
  crossorigin: undefined,

  // subresource integrity
  integrity: false,

  css: {
    // extract: true,
    // modules: false,
    // localIdentName: '[name]_[local]_[hash:base64:5]',
    // sourceMap: false,
    // loaderOptions: {}
  },

  // whether to use eslint-loader
  lintOnSave: true,

  devServer: {
  /*
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {}
  */
  }
})

portfinder

概述:用來查詢一個給定範圍內的,一個可用的端口號。
實例:查詢一個可用的端口號。

// 設置檢查範圍的起始端口號。
portfinder.basePort = args.port || process.env.PORT || projectDevServerOptions.port || defaults.port
//port是一個promise,.then中能夠獲得具體的端口
const port = await portfinder.getPortPromise();
//使用port
const urls = prepareURLs(
  protocol,
  host,
  port,
  isAbsoluteUrl(options.baseUrl) ? '/' : options.baseUrl
)
相關文章
相關標籤/搜索