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

开篇

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

posted @   BNTang  阅读(199)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
历史上的今天:
2023-06-15 TienChin 代码格式化-项目结构大改造
  1. 1 总会有人离开 王巨星
  2. 2 月亮 孟凡明
  3. 3 迟里乌布
  4. 4 我只能离开 颜人中
  5. 5 达尔文 蔡健雅
  6. 6 夜色滚烫 叶明净
  7. 7 你的星环 路飞文
  8. 8 不再说话 三块木头
  9. 9 黄昏 粥粥和小伙/粥粥
  10. 10 爱不单行 刘大拿
  11. 11 心动贩卖机 PIggy
  12. 12 别来无恙 苏星婕
  13. 13 我们的歌 刘大拿
  14. 14 一直很安静 王贰浪
  15. 15 去有风的地方 清音
  16. 16 雪 Distance Capper/罗言
  17. 17 坏女孩 徐良/小凌
  18. 18 乐园 沧桑Cang333/虎皮蛋/曲甲
  19. 19 Ayo(Explicit) Chris Brown/Tyga
  20. 20 我的美丽feat.海洋Bo 海洋Bo/高睿
  21. 21 世事可爱 粥粥和小伙/粥粥
  22. 22 我记得 赵雷
  23. 23 我想牵着你的手 许嵩
  24. 24 人们都不懂 刘诺然
  25. 25 寻一个你(电视剧《苍兰诀》温情主题曲) TTTTTeehom
  26. 26 子莫格尼 杉和
  27. 27 Cat Cafe Shoffy
  28. 28 风停了雨停了我们还拥抱着 Superluckyqi
  29. 29 寂寞沙洲冷 于潼
  30. 30 三国恋 王巨星
  31. 31 达尔文 林俊杰
  32. 32 有些 颜人中
  33. 33 小模样 张小只ya
  34. 34 是否 程响
  35. 35 楼顶上的小斑鸠 队长
  36. 36 笑场 薛之谦
  37. 37 还是分开 张叶蕾
  38. 38 修炼爱情 林俊杰
  39. 39 二零三 毛不易
  40. 40 雅俗共赏 许嵩
  41. 41 Serendipity 古瑞斯Graps/Zakiya晴子
  42. 42 就让这大雨全都落下·2023 刘大拿
  43. 43 老男孩 筷子兄弟
  44. 44 有何不可 许嵩
  45. 45 缓缓 杜宣达
  46. 46 好久不见 陈奕迅
  47. 47 爱的魔法(Cover 金莎) 封茗囧菌
  48. 48 在你的身边 盛哲
  49. 49 带我去找夜生活 告五人
  50. 50 假面舞会 很美味
  51. 51 STAY The Kid LAROI/Justin Bieber
  52. 52 我好想睡觉的 无敌西红柿
  53. 53 日不落(温柔版)
  54. 54 恋爱画板 锦零
  55. 55 7710 好乐无荒/尹露浠
  56. 56 给你呀(又名:for ya) 蒋小呢
  57. 57 Love Story Taylor Swift
  58. 58 Plain Jane(Remix 13z) 鱼幼微
  59. 59 晚风 7opy/BT07
  60. 60 拜托 孙晨
  61. 61 乌梅子酱 李荣浩
  62. 62 南半球与北海道 范倪Liu
  63. 63 星河万里 Rom邢锐
寂寞沙洲冷 - 于潼
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作曲 : 周传雄

编曲 : 刘龙

制作人 : 韩俊平/薛正一

自你走后心憔悴

白色油桐风中纷飞

落花似人有情这个季节

河畔的风放肆拼命的吹

无端拨弄离人的眼泪

那样浓烈的爱再也无法给

伤感一夜一夜

当记忆的线缠绕过往支离破碎

是慌乱占据了心扉

有花儿伴着蝴蝶

孤雁可以双飞

夜深人静独徘徊

当幸福恋人寄来红色分享喜悦

闭上双眼难过头也不敢回

仍然捡尽寒枝不肯安歇微带着后悔

寂寞沙洲我该思念谁

自你走后心憔悴

白色油桐风中纷飞

落花似人有情这个季节

河畔的风放肆拼命的吹

无端拨弄离人的眼泪

那样浓烈的爱再也无法给

伤感一夜一夜

当记忆的线缠绕过往支离破碎

是慌乱占据了心扉

有花儿伴着蝴蝶

孤雁可以双飞

夜深人静独徘徊

当幸福恋人寄来红色分享喜悦

闭上双眼难过头也不敢回

仍然捡尽寒枝不肯安歇微带着后悔

寂寞沙洲我该思念谁

当记忆的线缠绕过往支离破碎

是慌乱占据了心扉

有花儿伴着蝴蝶

孤雁可以双飞

夜深人静独徘徊

当幸福恋人寄来红色分享喜悦

闭上双眼难过头也不敢回

仍然捡尽寒枝不肯安歇微带着后悔

寂寞沙洲我该思念谁

仍然捡尽寒枝不肯安歇微带着后悔

寂寞沙洲我该思念谁

原唱 : 周传雄

本歌曲来自〖云上工作室〗

10亿现金激励,千亿流量扶持!

业务联系:yunmusic_2013@163.com

点击右上角即可分享
微信分享提示