开篇
经过『手撕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 安装:
bash
npm install shelljs
安装完成后,我们就可以在项目中使用 shelljs
了。
使用 shelljs
在项目中使用 shelljs
非常简单,只需要引入 shelljs
模块,然后调用相应的 API 即可。
那么就来看看如何在我们自己编写的 nue-cli 项目中如何使用 shelljs
来完成自动安装依赖的功能。
实现自动安装依赖
shelljs 安装好了,现在需要在项目中引入它。在 bin\create.js
文件中添加如下代码:
javascript
const shell = require('shelljs');
接下来,需要在 create.js
中添加自动安装依赖的代码,我这里先一步一步来,我先写一下实现步骤,定义一个方法的名字为 installDependencies
,然后在这个方法中调用 shelljs
的 exec
方法,执行 npm install
命令。
javascript
const installDependencies = () => {
shell.exec('npm install');
}
代码写好了,接下来在 create.js
中主流程中调用这个方法:
javascript
// 执行 npm install
await waitLoading('installing dependencies...', installDependencies)();
代码写到这我发现一个问题,就是 shelljs
的 exec
方法是异步的,我要改造一下将其改为同步的,用之前的 promisify 方法,单独转一下 exec 方法:
javascript
const exec = promisify(shell.exec);
还有一个问题就是,我们拷贝好了模板到当前的目录,现在是要执行安装依赖,我们目前所处的位置还不是模板的根目录,所以我们需要先进入到模板的根目录,然后再执行 npm install
命令。
所以之前的 installDependencies
方法需要改造一下,加入进入到模板根目录的逻辑,还需要传递一个参数,就是模板的名称(projectName):
javascript
const installDependencies = async (projectName) => {
shell.cd(projectName);
await exec('npm install');
}
经过这一版本的改造,自动安装依赖功能就实现了,接下来来测试一下。
测试
因经过上篇文章的测试过后,项目已经拷贝过来了,所以我会将之前的代码注释掉,主流程当中就只会执行 installDependencies
方法。
为了展示运行过程,我准备了一个动图(gif)作为演示。不过,在录制过程中出现了一个小错误,似乎是因为模板依赖未能成功下载。我会在接下来的时间尝试更换一个源,并带领大家一起探索问题解决方案。待到问题解决后,将继续在下一篇文章中分享。感谢您的阅读,我们下篇文章再会。