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

合集 - 手撕Vue-CLI(13)

1.『手撕Vue-CLI』自定义指令04-172.『手撕Vue-CLI』编码规范检查05-173.『手撕Vue-CLI』添加帮助和版本号05-184.『手撕Vue-CLI』添加自定义指令05-195.『手撕Vue-CLI』处理不同指令05-206.『手撕Vue-CLI』拉取模板名称05-277.『手撕Vue-CLI』添加终端用户交互05-278.『手撕Vue-CLI』拉取版本号05-309.『手撕Vue-CLI』函数柯里化优化代码05-3010.『手撕Vue-CLI』获取下载目录06-0111.『手撕Vue-CLI』下载指定模板06-0212.『手撕Vue-CLI』拷贝模板06-05

13.『手撕Vue-CLI』自动安装依赖06-15

收起

开篇

经过『手撕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）作为演示。不过，在录制过程中出现了一个小错误，似乎是因为模板依赖未能成功下载。我会在接下来的时间尝试更换一个源，并带领大家一起探索问题解决方案。待到问题解决后，将继续在下一篇文章中分享。感谢您的阅读，我们下篇文章再会。

__EOF__