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

开篇

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

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

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

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

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

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

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

shelljs 的主要特点如下：

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

首先，我们需要安装 shelljs，可以通过 npm 安装：

代码语言：bash复制

npm install shelljs

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

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

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

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

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

0 人点赞