g770728y / create-react-library-webpack

制作react组件库的工具, 基于create-react-app, 非常易用, 没有魔法

创建react组件库的工具, 基于create-react-app构建.

git clone https://github.com/g770728y/create-react-library-webpack.git <your-project-name>
vi ./package.json  <== 修改package.json中的project信息
yarn
**注意:**  `src/lib/index`是你真正要导出为library的代码, 供其它库引用
**测试**: src/index+src/demo/index仅用于测试, 当然你也可以直接使用整合好的storybook
**发布**: npm publish

---

特性

• 基于create-react-app, 并且没有eject
• 你可以使用scss等 CRA 的诸多特性, 并且不需要额外配置
• 默认配置了 storybook(支持 css module + typescript), 直接在src目录下写.stories.tsx, 然后 yarn sb
• 支持jest, 直接在src目录下*.test.ts, 然后 yarn test

---

何时使用

社区有好几种选择, 但我不喜欢魔法(担心无法升级), 不喜欢eject, 对一些工具居然不支持typescript难以理解, 所以自己基于create-react-app修改了一个.\

• 你需要创建一个react组件库
• 熟悉create-react-app
• typescript是你的最爱
• 无法忍受动辄 5s 以上的增量构建速度
• 使用create-react-library遇到难以解决的rollup相关问题

其它候选

以下情况使用create-react-library

然而, 多数情况下, 还是推荐使用create-react-library:
这是使用最多的工具, 基于rollup, 非常易用:
create-react-library
请优先使用它, 直到你遇到rollup相关的问题(比如增量构建慢, 无法解决的 bug)

father应该不错, 不过非cra系的, 可能不太习惯

umi社区的father

---

如何使用

git clone https://github.com/g770728y/create-react-library-webpack.git <your-project-name>

vi ./package.json  <== 修改package.json中的project信息
yarn

yarn start

Open http://localhost:3000 to view it in the browser.

yarn test

yarn sb

在 9001 端口运行 storybook

yarn build

只会构建lib目录下的文件

npm publish

只会发布lib目录下的文件