『手撕Vue-CLI』自动安装依赖

news/2024/10/5 19:19:10

开篇

经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。

正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。

自动安装依赖

在前文中,我们已经将模板文件复制到了指定目录。接下来,我们需要在该目录下执行 npm install 命令,以自动安装依赖。

如何安装依赖?

我们平时咋安装依赖的?对,就是在项目目录下执行 npm install 命令。那么,我们如何在 Node.js 中执行这个命令呢?

在写这篇文章之前,我在自己实现的过程中,也是遇到了这个问题。我查阅了很多资料,最终找到了一个解决方案,那就是使用 shelljs 库。

所以先来给大家简单介绍一下 shelljs

shelljs

shelljs 是一个 Node.js 模块,它提供了一组简单的 Unix shell 命令,可以用于执行 shell 脚本。它是一个轻量级的模块,可以在 Node.js 环境中运行。

shelljs 的主要特点如下:

  • 轻量级:shelljs 是一个轻量级的模块,可以在 Node.js 环境中运行。
  • 简单易用:shelljs 提供了一组简单的 Unix shell 命令,可以用于执行 shell 脚本。
  • 跨平台:shelljs 可以在 Windows、Linux 和 macOS 等操作系统上运行。
  • 兼容性好:shelljs 兼容大多数 Unix shell 命令,可以方便地在 Node.js 环境中使用。
  • 开源:shelljs 是一个开源项目,可以在 GitHub 上查看源代码。
  • 社区活跃:shelljs 有一个活跃的社区,可以在 GitHub 上提交问题和建议。
  • 文档齐全:shelljs 有详细的文档,可以帮助开发者快速上手。
  • 安装方便:shelljs 可以通过 npm 安装,非常方便。
  • 使用方便:shelljs 提供了一组简单的 API,可以方便地执行 shell 命令。

就先简单介绍这么多,接下来我们来看看如何使用 shelljs

安装 shelljs

首先,我们需要安装 shelljs,可以通过 npm 安装:

npm install shelljs

安装完成后,我们就可以在项目中使用 shelljs 了。

使用 shelljs

在项目中使用 shelljs 非常简单,只需要引入 shelljs 模块,然后调用相应的 API 即可。

那么就来看看如何在我们自己编写的 nue-cli 项目中如何使用 shelljs 来完成自动安装依赖的功能。

实现自动安装依赖

shelljs 安装好了,现在需要在项目中引入它。在 bin\create.js 文件中添加如下代码:

const shell = require('shelljs');

接下来,需要在 create.js 中添加自动安装依赖的代码,我这里先一步一步来,我先写一下实现步骤,定义一个方法的名字为 installDependencies,然后在这个方法中调用 shelljsexec 方法,执行 npm install 命令。

const installDependencies = () => {shell.exec('npm install');
}

代码写好了,接下来在 create.js 中主流程中调用这个方法:

// 执行 npm install
await waitLoading('installing dependencies...', installDependencies)();

代码写到这我发现一个问题,就是 shelljsexec 方法是异步的,我要改造一下将其改为同步的,用之前的 promisify 方法,单独转一下 exec 方法:

const exec = promisify(shell.exec);

还有一个问题就是,我们拷贝好了模板到当前的目录,现在是要执行安装依赖,我们目前所处的位置还不是模板的根目录,所以我们需要先进入到模板的根目录,然后再执行 npm install 命令。

所以之前的 installDependencies 方法需要改造一下,加入进入到模板根目录的逻辑,还需要传递一个参数,就是模板的名称(projectName):

const installDependencies = async (projectName) => {shell.cd(projectName);await exec('npm install');
}

经过这一版本的改造,自动安装依赖功能就实现了,接下来来测试一下。

测试

因经过上篇文章的测试过后,项目已经拷贝过来了,所以我会将之前的代码注释掉,主流程当中就只会执行 installDependencies 方法。

为了展示运行过程,我准备了一个动图(gif)作为演示。不过,在录制过程中出现了一个小错误,似乎是因为模板依赖未能成功下载。我会在接下来的时间尝试更换一个源,并带领大家一起探索问题解决方案。待到问题解决后,将继续在下一篇文章中分享。感谢您的阅读,我们下篇文章再会。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/43933.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

【触想智能】壁挂式工业一体机在智能制造行业上的应用分析

随着智能制造的兴起,壁挂式工业一体机成为了越来越多工厂的首选设备。壁挂式工业一体机是一种高性能的计算机,内置多种工业级传感器和执行器,可以实时获取工厂生产过程中的各种数据,并与其他设备进行无缝连接。为了大家更深入的了解壁挂式工业一体机的应用,下面,触想智能…

【Photoshop】PS修改文字内容

Photoshop(PS)修改图片上文字内容,网上教材不少,本人整理实践过的方法,分享给各位。本人实践方法:内容识别填充:适用于背景色复杂的图片 内容修补工具:适用于背景色为纯色的图片方式一:内容识别填充使用ps打开要修改的图片。(习惯性复制图层哦) 使用选框工具选择要修改的…

程序员必备的工具网站,大幅度提升你的工作效率

1.在线正则表达式匹配网站:https://tool.oschina.net/regex/2.网络请求自动代码编写:https://curl.trillworks.com/ 做过爬虫的程序员都知道,我们在分析网页文件的请求时,会在开发者工具里查看浏览器请求过来的文件 。3.在线颜色代码转变 颜色代码转换:https://www.sioe.…

easyExcel poi 比较

easyExcel & poi 比较

android studio 启动虚拟机长时间无响应,无法启动(二)

书接上回,MAC 更新到 11.0 需要 40GB,但是我的电脑一共120GB,系统内存占了70GB,更新完MAC是剩不下空间了,因此不选择更新版本,重新安装了较低版本的Android studio Android studio 官网又出现了新的问题。。。 问题 PANIC: Broken AVD system path. Check your ANDROID_…

SOFTS: 时间序列预测的最新模型以及Python使用示例

近年来,深度学习一直在时间序列预测中追赶着提升树模型,其中新的架构已经逐渐为最先进的性能设定了新的标准。 这一切都始于2020年的N-BEATS,然后是2022年的NHITS。2023年,PatchTST和TSMixer被提出,最近的iTransformer进一步提高了深度学习预测模型的性能。 这是2024年4月…

【Python】Python实现解压rar文件

Python实现解压rar文件 零、需求 最近在开发一个填分数的应用,需要用到selenium,那么自然需要用到浏览器,浏览器内置到应用中,但是上传到GitCode的时候被限制了,单个文件大小只能是10M以内。所以只能压缩,分卷,用的时候再解压就好。zip的分卷解压要合并后才能解压,太占…

QT210开发板学习(2): 通过DNW点亮LED灯

查找开发板原理图,可知可用的LED有4个, 引脚为EINT0/1/2/3, 对应的IO口则是GPH0_0/1/2/3, 寄存器有GPH0CON,GPH0DAT,GPH0PUD,GPH0DRV GPH0CON用来设置IO模式(地址为0xE0200C00), GPH0DAT是电平状态(地址为0xE0200C04) 我们需要设置为Output模式, 并且将状态设置为高电平 新建一…