create-parcel-react-library

CLI for creating reusable, modern React ts libraries using Rollup and Parcel.

Intro

This package was inspired by create-react-library

Simplify the progress of creating a react-ts library .

Take advantage of Parcel and Rollup .

Features

<input checked="" disabled="" type="checkbox"> Easy-to-use CLI
<input checked="" disabled="" type="checkbox"> Handles all modern JS features
<input checked="" disabled="" type="checkbox"> Bundles commonjs and es module formats
<input checked="" disabled="" type="checkbox"> parcel for example usage and local dev
<input checked="" disabled="" type="checkbox"> Rollup for bundling
<input checked="" disabled="" type="checkbox"> Babel for transpiling
<input checked="" disabled="" type="checkbox"> Jest + testing-library for react testing
<input checked="" disabled="" type="checkbox"> Supports complicated peer-dependencies
<input checked="" disabled="" type="checkbox"> Supports CSS modules
<input checked="" disabled="" type="checkbox"> TypeScript Only
<input checked="" disabled="" type="checkbox"> Sourcemap creation
<input checked="" disabled="" type="checkbox"> lint-staged support
<input checked="" disabled="" type="checkbox"> Conventional commit by git-cz
<input checked="" disabled="" type="checkbox"> standard-version support by npm run release
<input checked="" disabled="" type="checkbox"> github Actions
<input checked="" disabled="" type="checkbox"> Format on Save ( Vscode Editor )
<input checked="" disabled="" type="checkbox"> Travis CI & Code coverage by custom configration
<input checked="" disabled="" type="checkbox"> parcel-proxy-server for Proxy serve support
<input checked="" disabled="" type="checkbox"> storybook support

Install globally

This package requires node >= 10.

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

Usage with npx

No need to create an empty folder before running.

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

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Creating a New Module

create-parcel-react-library

Answer some basic prompts about your module, and then the CLI will perform the following steps:

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

At this point, your new module is ready and is all setup for local development.

Development

There's only one thing to do your development is enjoy your coding in src/ and your example in example/

npm start # start your example dev code

Now, anytime you make a change to your library in src/ or example/ will live-reload your parcel dev so you can iterate on your component in real-time.

Update Peer Dependencies

After update peerDependencies in package.json .

npm run install-peers # reinstall peers after update

With storybook

Init storybook environment by

npx sb init

Get Start with Storybook and develop your Component, Reference docs

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

Open 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

This builds commonjs and es versions of your module to dist/ and then publishes your module to npm.

Make sure that any npm modules you want as peer dependencies are properly marked as peerDependencies in package.json. The rollup config will automatically recognize them as peers and not try to bundle them in your module.