Vue CLI 是一个构建 Vue.js 项目的标准工具，它提供了一个脚手架，可以让我们快速建立基于 Vue.js 的项目，并且包含了很多实用的配置和插件。而 @vue/cli-shared-utils 是 Vue CLI 内部用于共享工具的 npm 包，我们可以使用它来方便地进行一些常见任务的处理。
安装
安装该包，可以通过以下命令进行：
npm i -D @vue/cli-shared-utils
此外，还需要安装 Node.js，推荐使用 LTS 版本以确保稳定性和兼容性。
使用
Vue CLI 提供了内置的构建命令和通用工具，我们可以在项目中使用如下的引入方式：
const { loadModule, loadModuleExports } = require('@vue/cli-shared-utils')loadModule 和 loadModuleExports
loadModule 是一个加载模块的通用方法，它可以将模块相对于当前项目的路径作为参数，加载该模块并返回它的导出对象。在 Vue CLI 中，有些配置文件需要通过加载模块进行读取和解析，因此该方法被广泛使用。
const configPath = api.resolve('babel.config.js')
const babelConfig = loadModule(configPath) || {}loadModuleExports 是在 loadModule 的基础上，将该模块的导出对象转换为一个函数并返回。该方法通常用于将配置文件转换为函数式配置，一些插件也会使用该方法对配置进行处理。
const { applyOptions } = require('@vue/cli-service/lib/options')
module.exports = api => {
const options = loadModuleExports(api.resolve('src/config.js'))
applyOptions(api, options)
}log 和 error
logger 是一个提供了向控制台输出信息的常用方法。在 Vue CLI 内部，我们经常使用该方法输出一些调试信息或错误信息。该方法输出的信息包括时间戳、命令行参数和消息文本。
const { logger } = require('@vue/cli-shared-utils')
logger.log(`This is a info message.`)error 方法是 logger.error 的别名方法，用于输出错误信息。该方法带有两个参数，第一个参数是错误消息，第二个参数是错误对象。
try {
doSomething()
} catch (e) {
error('Something failed:', e)
}shouldUseYarn
shouldUseYarn 是一个判断包管理器的常用方法，如果你的项目是使用 Yarn 管理的，则返回 true；如果是使用 npm，则返回 false。
const { shouldUseYarn } = require('@vue/cli-shared-utils')
const packageManager = shouldUseYarn() ? 'yarn' : 'npm'genCacheConfig
genCacheConfig 是一个生成缓存配置的方法。在 Vue CLI 内部，我们使用该方法生成缓存配置，加速某些操作的处理速度。
-- -------------------- ---- ------- ----- - --- - - ----------------------- ----- ---------------- - ------------------- --------------- - -------------- -------------------------------------------- --------------- --------------------------------------------- ------- --------------------------------------- ------------- --------------------------------------- -- - ------------------ ----------------- --
示例
下面我们看一个使用 @vue/cli-shared-utils 包的示例：
const { logger } = require('@vue/cli-shared-utils')
const sayHello = () => {
logger.log('Hello, World!')
}
sayHello()使用上述代码，将在控制台输出 “Hello, World!" 的信息。
总结
@vue/cli-shared-utils 提供了很多实用的工具方法，其中包括加载模块、输出日志、检测包管理器等。掌握这些工具方法，可以让我们更加高效快速地进行 Vue 项目开发。在实际使用时，我们需要根据具体项目的需求，选择合适的方法进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193632