@21epub/create-storybook-react-library 中文文档教程

Question

create-storybook-react-library

使用 Rollup 和故事书创建可重用的现代 React ts 库的 CLI。

Intro

这个包是 @21epub/create-parcel-react-library

为 npm 库创建实现故事书组件 UI 环境。

Features

• [x] Easy-to-use CLI
• [x] Handles all modern JS features
• [x] Bundles commonjs and es module formats
• [x] storybook for Component UI implementation
• [x] Rollup for bundling
• [x] Babel for transpiling
• [x] Jest + testing-library for react testing
• [x] Supports complicated peer-dependencies
• [x] Supports CSS modules ( Both less and Sass ) with Storybook
• [x] TypeScript Only
• [x] Sourcemap creation
• [x] lint-staged support
• [X] Conventional commit by git-cz
• [X] standard-version support by npm run release
• [X] Format on Save ( Vscode Editor )
• [X] Travis CI & Code coverage by custom configration

Install globally

此包需要 node >= 10。

npm install -g @21epub/create-storybook-react-library

Usage with npx

运行前无需创建空文件夹。

npx @21epub/create-storybook-react-library

Creating a New Module

create-storybook-react-library

回答有关您的模块的一些基本提示，然后 CLI 将执行以下步骤：

• copy over the template
• install dependencies via yarn or npm
• install peers vis yarn or npm (You have to do this since peers will not auto installed , dev start will cause error !)
• initialize local git repo

此时，您的新模块已准备就绪，并且已为本地开发做好了全部设置。

Development (with Storybook)

你的开发只有一件事就是享受你在 src/

npm start # start your Storybook ENV 

中的编码您可以实时迭代您的组件。

开始使用 Storybook 并开发您的组件，参考文档

Update Peers Dependencies

在 package.json 中更新 peerDependencies 或安装新的之后dependencies

npm run install-peers # reinstall peers after update

Commit

Commit Method

npm run commit # lint before commit can save your time , and then conventional commit with git-cz

Publishing to npm

npm run release # Version and changelog
git push --follow-tags origin master
npm publish # The `prePublishOnly` hook will run before publish to build and test your package

Recommandation 这会构建你的模块的 commonjs 和 es 版本到 dist/ 然后发布你的模块到 npm。

确保您希望作为对等依赖项的任何 npm 模块在 package.json 中正确标记为 peerDependencies。 rollup 配置会自动将它们识别为对等体，而不是尝试将它们捆绑到您的模块中。

License

麻省理工学院 © 21epub