有哪个前端不想拥有自己的脚手架和自己的组件库呢?其实前端发展至今,脚手架无疑涵盖了大部分前端需要掌握的技能:nodejs,框架,js,ts等等。其实搭建一个脚手架很简单,随便找个开源,改吧改吧就OK了?所以如果你需要的是一个脚手架的工具,完成任务。其实可以看精简版的搭建教程。我这次主要分享的是脚手架所包含的前端工程技术知识。
好了,下面我们开始吧
规则
- 我这个系列文章都会采用 输出需求,设计方案,实战代码及背后逻辑。 2. 我先提出问题,大家先不要看答案,先自己思考 3. 如果我有没提到的,大家可以留言,我一定会回答,如果我没来得及,也欢迎私信或其他同学积极讨论,目的只有一个,出真知。
整体目标
- 完成一个包含 nodeserver,react生态,vue生态,jssdk的对话式 cli工具。
- 了解nodejs开发,了解react&vue技术选型策略,web项目开发规范。jssdk使用场景
- 最重要的,我会引导大家如何提出问题,回答问题,解决问题。以及如何感知痛点。
本小节的目标:了解脚手架的背后逻辑。
-
什么是脚手架
-
为什么要做脚手架
-
我要实现一个对话式脚手架,我需要先去了解哪些方面的知识,有哪些开源包能解决我的问题
什么是脚手架?
简单说,脚手架是盖房子的时候,用于建筑施工用的一种架子,可以站人,方便施工,方便拆除。在编程中,更重要的是用于快速搭建一个可以定制化的并保留固定的一些技术解决方案的工具。前端中常用的 有 vue-cli,vite,create-react-app,以及express-generator。各有各的场景,各有各的用法。
为什么要做脚手架?
其实我很喜欢问为什么。因为这是深入的第一步,多问为什么会增加你的求知欲。但是最好是 先自己想想为什么,再问为什么。
其实这个问题是要分脚手架的使用场景的。
- 没别的,就是觉得有自己的脚手架很帅
- 提升个人的项目搭建效率,不用频繁搭架子。
- 公司有自己的一套标准的前端生态或需要统一接入多个sdk。希望提升开发效率,统一收口公司的技术规范。(关于公司的一些前端工程化方案,我后面会详细整理。)
这里多说一句,建议大家不要重复造轮子,学会发现轮子的不好,改进它,其实也很有意义。
实现一个对话式node脚手架,我需要先去了解哪些方面的知识。
参考vue-cli的交互, 1.我需要输入一个命令 create-app调起对话 2. 对话 问询 生成的项目技术栈或方向 3. 问询结束,生成项目 根据上面的交互可以知道,我们需要一个可以让nodejs对话并记录对话内容的工具,然后我们需要根据对话内容,生成一个项目,然后根据对话来判断项目提供哪些功能?
- nodejs,基础环境,无需多言,建议先把nodejs官网的learn看完,花不了很长时间,但是会很有用.
- inquire:通用交互式命令行用户界面的集合。
- monorepo:多包管理方案,因为涉及到多个模块(eslint,ts,以及框架全家桶),而且为了方便调试和开发,所以采用多包管理的 方案是最快速有效的。
- EJS:一个嵌入式的模板引擎,由于提供可插拔的功能,所以我们需要一个轻量 的模板引擎。在一个干净的基础模板上,增加功能。
好了,本章节需要了解的知识已经介绍完了。只是基础的一些知识。如果你有兴趣继续了解下去,欢迎点赞关注呀。如果有其他的解决方案,欢迎大家留言呀。欢迎battle。
下期预告,monorepo:一个又爱又恨的解决方案 待排期预告:一个完整的前端工程化规范是什么?npm,yarn pnpm,项目炸了,我累了? 前端哲学,前端有哲学?