當vue-cli建立了一個vue-demo後,咱們使用npm run serve就能夠啓動項目了。經過package.json中的serve命令咱們能夠看到,實際是啓動了vue-cli-service serve
這個命令。這個命令其實是啓動了一段node腳本,那這個腳本引用了哪些包呢?讓咱們來一探究竟。javascript
概述:這個包是用來作版本號規範處理的,能夠校驗一個輸入的版本號是否符合規範,以及某個包是否知足某個版本。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
概述:這個包是用來處理命令行的參數輸入的。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
概述: 一個輕量級的調試工具,根據參數返回一個打印錯誤的函數。看起來是能夠讓不一樣的錯誤輸出更清晰,顏色很美。
實例: 爲不一樣的錯誤建立不一樣的錯誤輸出函數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
概述:能夠以不一樣的樣式輸出字符串到終端
實例:打印不一段字符串,其中關鍵字加粗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...
概述:一個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這個包提供的一個函數,有點相似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.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 )