当前位置: 首页 > 网络应用技术

从0中实现脚手架的简单版本

时间:2023-03-07 20:57:38 网络应用技术

  对于脚手架,前端没有非常清楚的定义。当我们在百度上搜索脚手架时,我们将看到这样的句子:脚手架是一个工作平台,以确保每个施工过程的平稳进度。

  因此,它可以理解为:一些模板在日常开发中积累,一些组件以及相对成熟的项目构建,促进重复使用并提高效率。

  简单地说:重复使用可以提高发展效率。(例如,我们通常使用vue-cli)

  vue-cli,create-react-app,Angular-cli在市场上已经可以很好地满足我们的日常需求。您为什么需要时间学习或开发新的脚手架?

  那么,最简单的脚手架中最基本的过程是什么?

  然后设定一个小目标,以完成一个简单的脚手架工具!

  2.1.1创建一个文件夹

  2.1.2创建条目文件├ - bin

  │d - index.js#

  G-包装

  2.1.3 NPM链接链接到全局NPM链接的函数:在本地开发NPM模块时,我们可以使用NPM链接命令将NPM模块链接连接到相应的操作项目,以轻松调试和测试模块

  修改软件包

  执行代码

  裁定订单

  在这一点上:我们的小目标更近了!

  Chalk-Pipe使用更简单的样式字符串来创建粉笔样式解决方案粉笔正确处理终端字符串String style commander.js完整node.js命令行solution询问询问一组通用交互式命令行用户界面。斜杠系统路径处理极简主义分析参数参数选项选项dotenv将环境变量从.env文件加载到现有环境变量的dotenv-expand扩展,该变量hash-sum hash-sum将计算机扩展到process.env file.env file.env.env.env.env.eNV.ENV.ENV.ENV.ENV.ENV.YAML--前后解析YAML或JSON RESOLVE软件包。

  2.3.1注册命令

  裁定订单

  结果,我们可以看到Create命令已生效并对相应的参数进行了评分。当然,这仅仅是开始。我们必须定位用户输入的命令!

  2.3.2改善了LIB文件夹的创建,并在文件夹下方创建create.js;

  ├ - lib

  │at- Create.js#创建文件

  create.js职责:

  2.3.3要通过一个示例了解查询,我们需要通过查询询问用户相关的问题。

  让我们通过一个示例来看一下查询。

  上面的示例使您可以更好地了解询问的用法。包括输入框,选择框,验证,何时和其他用法方法。您还可以通过官方网站学习更多详细信息!

  2.3.4询问用户是否涵盖了现有目录,然后改进查询的逻辑并删除逻辑。通过确定本地文件夹是否已经存在,覆盖和其他操作!

  通过创建一个空文件夹应用程序来验证它是否满足期望!

  可以看出,删除逻辑已得到满足!

  2.3.5安装模板此脚手架主要是通过拉远程仓库模板来实现的。因此,我们需要获取远程模板,版本。Make模板安装!

  在LIB文件夹中,并在文件夹下方创建HTTP.JS;

  ├ - lib

  │t - http.js#创建文件

  正如我们期望的那样,我们可以提供远程模板,分支并将其提供给用户选择!目前,因为它是Gitlab内部部署,因此并非暂时无法通过接口请求获得远程仓库和分支。因此,固定的模板和分支是在本地编写的。选项配置作为用户。let完成模板的下载。因此,通过模拟数据来实现当前效果

  2.3.6模拟数据在LIB文件夹中,并在文件夹下方创建了UTIL.JS;

  ├ - lib

  │t - util.js#创建文件

  2.3.7模板提出了这个问题?我们如何从远程仓库中提取代码?

  在这一点上,我们可以考虑拉动代码的方法。gitclone xxxx。因此,我们可以使用Execa执行代码。

  在LIB文件夹中,并在文件夹下方创建Generator.js;

  ├ - lib

  │er-生成器.js#创建文件

  本地执行命令

  在这一点上,我们会发现应用程序文件夹不会像预期的那样生成。

  2.3.8缺乏项目名称文件夹方法新创建者方法

  更新克隆函数,提前创建一个文件夹,然后git克隆到当前目录

  2.3.9在下载项目(模板)时,活动NPM安装,此时我不想手动安装依赖项,以及我是否可以为用户积极执行NPM安装。

  新的安装功能

  TAOBAO镜像直接用于使用,主要用于更快的安装依赖项。当然,我们可以继续扩展,例如(根据用户的选择,使用NPM YARN等)

  更新创建

  执行命令以查看效果:

  2.3.10当打印文件多样化时,当我们每天使用Vue-CLI时,我们会发现打印控制台打印之间的区别。那么如何实现呢?

  我们可以使用粉笔来实现此功能。LET简单地优化了我们的工具

  在这一点上,我们已经与内部简单的脚手架结合在一起。

  供应

  我们还可以在此基础上执行该功能,例如:

  然后,您可以关注Vue-CLI以完成更完整的脚手架工具

  /bin/index.js

  /lib/create.js

  /lib/util

  /lib/http.js暂时毫无用处

  /lib/genrator.js

  原始:https://juejin.cn/post/7096028770653437966