如何创建你的应用脚手架

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

最近，因为新项目的需要，我正在创建一个 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。

选择框架

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

创建 hello, world

打开浏览器，然后：

• 使用官方提供的指南
• 寻找社区的指南

对应的也会有：

• 使用官方提供的 CLI
• 使用社区提供的脚手架

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

咨询最佳实践

打开聊天工具，然后：

• 寻求有经验的『专家』意见
• 咨询『年轻』人
• 阅读相关实践文章

注：

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

完善工程实践

打开 GitHub，然后

package.json

注：

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

尝试项目实践

打开 IDE，然后

awesome-xxx

注：

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

做下抉择

拿上个骰子，然后：

• A 还是 B。

注：

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

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

进一步深入

抄起键盘，接着：

• 表单及表单验证
• 动画
• HTTP 请求管理
• 授权

注：

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

代码生成（可选）

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

持续改进

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