从 vue-cli 依赖库学到了什么

原创
前端路迹
2022-3-22 8:56

vue-cli 核心模块 cli-service 的 package.json 中依赖有 50 多个模块,不禁好奇这些依赖为 vue-cli 提供了什么能力,下面一起来学习下。

依赖 作用
address 获取当前机器的本地ip、mac、dns信息,在dev 启动的时候就可以打印出本地ip访问地址。
clipboardy 访问系统剪贴板,vue server --copy 命令可以实现在服务器启动时将 URL 复制到剪切版,基于此库可以将 URL 写入剪贴板。
portfinder 获取一个可用的端口,可以指定一个范围内的端口,vue-cli 在 dev 启动的时候,如果你指定的端口被占用,会发现它会自动给你更换一个新的可用端口,这个功能就是基于它来实现的。
@soda/friendly-errors-webpack-plugin Webpack 的编译信息展示更加人性化。
@soda/get-current-script vue-cli 打包为库时,会注入此依赖,打包的库能自动识别当前的脚本的远程路径,进而正确加载依赖资源。
dotenv 识别 .env 文件。这也是 vue-cli 支持 .env.[mode] 来实现不同模式下不同配置。
webpack-chain 支持链式配置 Wepback,对应 chainWebpack 配置项。
cli-highlight 在终端中高亮代码,vue inspect 命令中用到。
cliui 可以在终端布局显示信息,像 CSS 一样,vue-cli主要用于显示编译后的资源信息,如下图所示。
ssri 计算内容的 hash 值,vue-cli 配置 crossorigin 会用到。
webpack-virtual-modules 构建 Web Components 组件用到。
whatwg-fetch window.fetch polyfill,解决 IE 下 dev 热更新依赖浏览器 fetch api 缺失的情况,
转载请注明出处。本文地址: https://www.qinshenxue.com/article/learn-from-vue-cli-service-package.html
微信扫一扫
关注该公众号