七步创建你的应用脚手架

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gmszone/article/details/100520464

应用脚手架是一个项目的重中之重,决定了整个项目的基调。

最近,因为新项目的需要,我正在创建一个 React 的脚手架(GitHub:https://github.com/phodal/react-boilerplate)。

我已经很长一段时间没有写 React 了,上一次写 React 可能是在 2015 年,好在 2017 年,我还写过 React Native——主要工作内容是在迁移 Cordova 的原生部分到 React Native。所以,大抵我熟悉在部分只剩下 React 本身了。

于是乎,我开始着手准备新的脚手架,顺带的整理出相关的步骤:

  1. 选定框架

  2. 创建 hello, world

  3. 咨询最佳实践

  4. 完善工程实践

  5. 尝试项目实践

  6. 做下抉择

  7. 进一步深入

  8. 持续改进

  9. 代码生成(可选)

等我有了更充足的时间,我就可以把它做成一个 Checklist。

640?wx_fmt=jpeg

选择框架

嗯,对于多数的组织来说,最合适的创建应用的套路是:选择框架而非自己造一个。所以,选择你的框架,然后再进入到下一步吧。

创建 hello, world

打开浏览器,然后:

  • 使用官方提供的指南

  • 寻找社区的指南

对应的也会有:

  • 使用官方提供的 CLI

  • 使用社区提供的脚手架

既然我们选择了一个脚手架,我们也需要更新脚手架,所以并没有多大的影响。

咨询最佳实践

640?wx_fmt=jpeg

打开聊天工具,然后:

  • 寻求有经验的『专家』意见

  • 咨询『年轻』人

  • 阅读相关实践文章

注:

越是年轻的一代,对于新技术也就越有追求;一方面是技术热情,一方面则是新的机会。如我对于 React 的记忆,可能还在几年前的 Flux,而这个世界已经经历了 Redux,Dva 等。

完善工程实践

打开 GitHub,然后

  • 依靠过往经验

  • 阅读开源项目的 package.json

  • 阅读开源项目的配置文件

  • 学习官方的相关规范

注:

阅读开源项目的 package.json,真的是一个非常棒的 IDEA。诸如我从同事的项目里,了解到了 plop除此,还有阅读开源项目的配置文件,只需要打开项目,从以及各种以点( .)开头的文件,诸如于 .npmignore,又或者是 *file,就可以了解到它们使用到了哪些神奇的东西。

尝试项目实践

打开 IDE,然后

  • 寻找 Todo App

  • 阅读流行的开源项目(如前端的组件库)

  • 参考组件库

  • 阅读一下 awesome-xxx

注:

对于一个框架来说,它们的 Todo APP 往往会有各种 fancy 的用法,比如 React Hooks 的 Todo,又或者是 Clean Architectrue 下的 TOdo。但是这些 Todo 往往有些时候,不是那么接地气。所以,需要找一些流行的开源项目。

640?wx_fmt=jpeg

做下抉择

拿上个骰子,然后:

  • A 还是 B。

注:

对于自由度的框架,如 React,你总会去纠结于 CSS in JS or CSS Modules,到底是 React Router DOM 还是 Reach?这个问题真的很难,特别是当你询问了一堆专家的意见之后,你会更加纠结。所以,这个时候,你会想着去做一个兼容方案。

等你决定完开发用的框架之后,你还要纠结测试框架呢?

进一步深入

抄起键盘,接着:

  • 表单及表单验证

  • 动画

  • HTTP 请求管理

  • 授权

注:

表单验证是最复杂的地方,于是要做的决策也就更多了。而诸如 Angular 有 Reactive Form 和普通的 Model Form,还得选择。而要是像 React 这样的框架,在设计上就会有更多的选择了——即可以自己设计,还可以选择框架。

代码生成(可选)

嗯,无论如何,你需要生成你的模板代码。如果你还没有,那么请考虑这部分的内容。

640?wx_fmt=jpeg

持续改进

剩下的话,我们就需要持续改进我们的脚手架了。

展开阅读全文

没有更多推荐了,返回首页