概述
当 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) 与默认配置。
// 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 => {}
*/
}
})