一个命令行(CLI)工具, 使用一个命令就可以为你创建一个基于Rollup的React库作为你开源项目的基础.
这个命令行工具(CLI)目的是让你可以简单的制作你自己的React库或组件
这个命令行工具(CLI)基于 boilerplate, 相关文章在这里.
- 基于CLI使用简单
- 创建了超过2000个公开的项目!!
- 包含了所有流行的js功能
- 同时支持
cjs和es模块格式 - 使用create-react-app为你的库创建示例相当容易
- Rollup构建支持
- Babel 转换支持
- Jest 测试支持
- 支持复杂的peer-dependencies依赖
- 支持 CSS modules
- 支持 Sourcemap
- 完善的文档 😍
这个包必须依赖 node >= 4, 但是我们推荐 node >= 8.
npm install -g create-react-librarycreate-react-library根据提示输入你模块的基本信息，然后CLI将会执行以下步骤
- 将模板复制到新创建的文件夹中
- 通过yarn或npm安装依赖
- 通过npm的link链接包到本地, 方便开发调用
- 初始化本地git仓库
这个时候，你的新模块目录应该和下面的截图差不多。这些所有的设置都是为了更友好的进行本地开发
本地开发分为两个部分.
首先, 你可以运行rollup去监听你的src/模块, 当你有任何更改会自动编译到dist/
npm start # 运行rollup和监听更改然后, 在本地开发中需要在example/目录中链接你的模块
# (打开新的终端窗口中)
cd example
npm link <your-module-name> # 如果使用yarn可以跳过这步
npm start # 运行 create-react-app dev server 可以开你的示例程序现在, 当你对库的src/目录或演示程序的example/src目录有任何更改, create-react-app会重新加载本地开发服务, 这样就能很愉快的对你的组件进行快速开发迭代.
将库发布到 npm 时请务必要确保所有的依赖模块已经正确添加在了peerDependencies中, rollup会自动识别peerDependencies配置选项, 而不会将它捆绑在你的模块中(或者可以叫他外部依赖).
然后就可以愉快的发布拉
# 注意下面的命令会编译`commonjs`和`es`的版本到你模块的dist/目录中
npm publish将示例部署到github pages相当简单, 我们需要先给example编译一个生产版本, 这个example用于演示你的库. 然后运行gh-pages来部署生成的bundle文件到github.
npm run deploy这个分支演示了如何导出多个命名的方法. 在这个分支的模块中导出了两个组件Foo和Bar, 然后展示他们怎么在example中进行调用的.
这个分支branch演示了如何使用peerDependencies来构建需要依赖外部material-ui的库. 它展示了rollup-plugin-peer-deps-external强大的peerDependencies依赖功能. 它可以轻松的依赖material-ui但又无需将它绑定到当前模块中.
下面是一些使用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 WorldWind
- react-shimmer - 加载图片时使用一个闪光的效果.
如果你想添加你的库到列表中, 欢迎提交 issue!
MIT © Travis Fischer