CLI for creating reusable, modern React libraries using Rollup and create-react-app.
这是一个 CLI 工具，借此您可以使用 Rollup 和 create-react-app 创建一个现代的，并可以可重复使用的您自己的 React 库（libraries)。
- 容易上手的 CLI
- 处理所有流行的 JS 功能
- 打包了 commonjs 和 es 模块的格式
- 使用 create-react-app 作为案例演示和本地开发
- 使用 Rollup 来打包
- 使用 Babel 来转码
- 使用 Jest 进行测试
- 支持复杂的同等依赖（peer-dependencies）
- 支持 CSS 模块（modules）
- 可以支持 TypeScript
- 创建 Sourcemap
- 上千个开源模块
- 贴心的文档 😍
- 中文文档参考 by @monsterooo
此安装包必须依赖 node 版本大于或者等于 10。
npm install -g create-react-librarynpx create-react-library(npx 通常要求 npm 5.2+ 或者更高版本, 详情请参考 关于较低 npm 版本的说明)
create-react-library根据提示，输入你想创建模块的一些基本信息，然后 CLI 将会执行以下步骤：
- 将模板复制到 template 中
- 通过 yarn 或 npm 安装依赖包
- 将安装包一起链接到本地开发中
- 初始化本地 git 仓库
在这个时候，你的新模块目录应该和下面的截图一直，这是本地开发的所有需要的设置啦。
我们将本地开发分成两个部分（推荐开启两个 tabs)。
首先, 运行 rollup 可以监听你的 src/ 模块, 当你有做出任何变更的时候会自动编译到 dist/ 中。
npm start # 运行 rollup 并且监听变更第二步就是运行 create-react-app 创建的 example/ 文件，它使用了您开发的模块的最新版本。
# (在一个新的终端窗口中运行)
cd example
npm start # runs create-react-app dev server现在, 若你改变 src/ 或演示项目下 example/src 的任何内容, create-react-app 会实时地加载本地开发的服务器, 您可以借此来实时迭代开发您的组件。
npm publish您会发现此命令创建了 commonjs 和 es 版本的模块，然后把您的模块发布到 npm。
请务必要确保您将任何同等依赖（peer dependencies）的 npm 模块正确地加入到 package.json 中的 peerDependencies里。这样一来 rollup 将它们识别为同等依赖，而不会将它们打包到您的模块中。
然后就可以愉快的发布拉
npm run deploy这行命令会创建一个生产环境下的 example create-react-app 文件，这样能够展示您的库，然后请运行 gh-pages 来部署最终的打包文件。
如果您在项目中使用 react-hooks，当您调试 example 项目时，您会遇到一个问题 Invalid Hook Call Warning。
此 问题 解释了其中的缘由，我们的库和文档使用了一个不同的实例，而我们的解决方案是重写您 example 中的 react 路径为"file:../node_modules/react"或者'link:../node_modules/react'。
查看此 branch 可以参考多个命名导出的方法。此模块中导出了两个组件，分别为 Foo 和 Bar, 以及如何在 example 中调用它们。
查看此 branch 可以参考如何使用一个相对复杂一些的同等依赖，material-ui。 利用 rollup-plugin-peer-deps-external 强大的功能，可以轻松的创建一个可重复使用的模块，它包含了复杂的同等依赖，但是不需要作为您模块的部分一起打包。
本 CLI 基于此 boilerplate，您也可以选择性地阅读 此文档。
下面是一些使用 create-react-library 引导来创建的一些库的例子。
- tabler-react - React Tabler UI 组件和展示。
- react-background-slideshow - React 创建背景性感的幻灯片效果 🔥
- react-starfield-animation - React 创建基于 Canvas 的星空动画 ✨
- react-particle-effect-button - React 创建的爆破粒子按钮效果 🎉
- react-particle-animation - React 创建基于 Canvas 的粒子动画 🌐
- react-block-image - React 中通过使用
div替换img来获得更多的控制 🌃 - react-mp3-recorder - React 实现的使用麦克风来记录 mp3 音频 🎵
- react-before-after-slider - React 创建的两个图片比较的库.
- worldwind-react-globe - React 实现的 NASA 虚拟地球组件。
- react-shimmer - 加载图片时使用一个闪光的效果.
- react-login-modal-sm - 定制的 React 社交平台登录模态框（modal）。
- react-gradient-scroll-indicator - 封装了带渐变效果的内容的滚动。
- react-editext - 可编辑的 Text 组件。
- ... 以及上百个更多的！
有兴趣查看更复杂的列表? 请查看 Made with CRL。
想把您的项目添加到我们的列表中吗？欢迎在 Made with CRL 库中提交一个 [PR] (https://github.com/HurricaneInteractive/made-with-crl#adding-a-library)。
现如今我的主要开源的精力集中在 Saasify，所以我无法投资太多精力到维护此 CRL 中。我一直在为项目寻找想成为一个积极的维护者的志愿者。如果您有兴趣的话，私信我把。
MIT © Travis Fischer
Support my OSS work by following me on twitter
