React 的 CLI 功能？！好的！

最近我开始接触 React 开发，只是因为我觉得有必要深入了解一下它到底是怎么回事。我想学习组件开发模式、合并状态、reducer 以及实现 hooks。我还想弄清楚如何进行服务器端渲染、延迟加载组件、引入国际化以及我最喜欢的 CSS 工具。

这一切都很好，只是学习肯定会重复。

动图

我发现自己每个组件都要创建三个文件。我会像往常一样扩展 React.Component，添加样式文件并导入，最后编写单元测试的样板代码。如果我能把学习所有这些模式结合起来，构建一个可以轻松搭建文件脚手架的工具，那会怎么样？这样我就可以花更多时间学习更重要的 React 语法了。

rctr诞生

所以我写了一个小的 Node 脚本，并发布在 npm 上。rctr v1.0.0 所做的只是克隆了一些入门代码，让你可以直接使用 Parcel 构建 React。后续版本改进了体验。

rctr 附带 rx cli。您可以使用该 cli 搭建新的应用。

rx new my-app

新的命令会使用 package.json 和全新的 git 仓库初始化你的项目。现在，你将获得所有功能：SSR、延迟加载、i18n、TypeScript、SCSS、PostCSS、Prettier、Jest/Enzyme 等等。未来，你或许可以将 SCSS 替换为 styled-components，或者将 Enzyme 迁移到 react-testing-library。目前，CLI 在搭建脚手架时只执行一项操作。未来可能会有更多选项。

与 Webpack 相比，Parcel 可以让这项工作变得非常简单。Parcel 无需配置，因此为了支持不同的脚手架，我们只需要弄清楚如何根据要使用的工具替换配置文件，并确保安装了正确的软件包。

搭建好脚手架后，我开始着眼于代码生成。虽然市面上有很多生成代码片段的工具，但我发现使用 CLI 工具搭建脚手架文件体验非常棒。

想要一个包含名为 AboutHeader 的组件的新文件吗？

rx generate component AboutHeader

那么，如果有一个视图名为 AboutPage，它导入了样式，并进行了测试，并且是延迟加载的，并且映射到路由，那会怎么样呢？这里的“视图”只是一个组件，它导入了样式。在这种情况下，视图可以是服务端渲染、延迟加载和/或映射到路由。

rx g v AboutPage —routing —lazy

如果您有 Angular 背景，您可能会发现此 CLI 命令与 ng generate 之间有着惊人的相似之处。这是有意为之。我使用 Angular CLI 的体验非常棒。迁移到 React 时，我希望获得类似的体验。相比之下，此 CLI 与构建工具的耦合度并不高。默认情况下使用 Parcel，但 CLI 对 Parcel 一无所知。我打算保持它的不可知性。

今天发布了 1.0.4 版本，支持生成器。

安装 cli 很简单！

npm i -g rctr

然后开始在 rctr 项目的任何目录中生成代码。

对 React 组件的生成方式有什么不同意见吗？或许我们可以为工程师提供自定义模板。目前有几种可以生成的模式。只需查看项目 README即可。

rctr cli 几周前才发布，npm 上的每周下载量就已经达到 100 左右。这个数字让我很受鼓舞，我计划很快添加更多功能。

查看Github 上的 rctr 项目。

现在回到实际解决一些问题...