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

Question

create-parcel-react-library

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

Intro

这个包的灵感来自 create-react-library

简化创建react-ts库的过程。

利用 Parcel 和 Rollup。

Features

• [x] Easy-to-use CLI
• [x] Handles all modern JS features
• [x] Bundles commonjs and es module formats
• [x] parcel for example usage and local dev
• [x] Rollup for bundling
• [x] Babel for transpiling
• [x] Jest + testing-library for react testing
• [x] Supports complicated peer-dependencies
• [x] Supports CSS modules
• [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] github Actions
• [X] Format on Save ( Vscode Editor )
• [X] Travis CI & Code coverage by custom configration
• [x] parcel-proxy-server for Proxy serve support
• [x] storybook support

Install globally

此包需要 node >= 10。

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

Usage with npx

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

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

(npx 随 npm 5.2+ 及更高版本一起提供，请参阅 < a href="https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f">instructions for older npm versions)

Creating a New Module

create-parcel-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

你的开发只有一件事就是享受你在 src/ 中的编码和你在 example/ 中的示例

npm start # start your example dev code  

现在，任何时候你在 src 中更改你的库/ 或 example/ 将实时重新加载您的 parcel dev，以便您可以实时迭代组件。

更新 Peer Dependencies

在更新 package.json 中的 peerDependencies 后

npm run install-peers # reinstall peers after update

With storybook

。 通过开始使用 Storybook初始化故事书环境

npx sb init

并开发您的组件，参考文档

npm run storybook

Commit

Commit Method Recommandation

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

Proxy Server

Set API proxy config in ./ scripts/proxy.config.json

npm run start:proxy  # start proxy server

打开代理服务器 url: http://localhost:12345/

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

这构建了 commonjs 和 es将模块的版本发布到 dist/，然后将模块发布到 npm。

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

License

麻省理工学院 © 21epub