@guoyunhe/react-lib-scripts

Scripts to build, lint and test React libraries.

Features:

• Minimum configuration, easy to use
• Output both CJS and ESM bundle
• Lightning fast build speed and fast refresh, powered by Vite
• Full TypeScript support in build, lint and test
• Ensure good coding style by ESLint and Prettier
• Out of box unit test support, powered by Jest
• Global variable PACKAGE_NAME and PACKAGE_VERSION to easily inject package information

Create projects

npm create @guoyunhe/react-lib my-package

Options

--help

Show help.

--version

Show version.

Commands

start

Start Vite dev server to live preview demos and documents. Fast refresh is enabled.

react-lib-scripts start

By default, Vite use 3333 port. If 3333 is not available, it will try 3334, 3335... If you wan to use a specific port:

react-lib-scripts start --port 4000

build

Build CJS, ESM and TypeScript declaration (*.d.ts).

react-lib-scripts build

CJS and ESM builds are powered by esbuild, one of the fastest JavaScript complier and bundler. TypeScript declarations are generated by TypeScript and bundled by API Extractor from Microsoft.

The build command read entry src/index.ts. CJS is output at dist/index.js. ESM is output at dist/index.mjs. Declaration is output at dist/index.d.ts.

Support watch mode with --watch option.

react-lib-scripts build --watch

watch

Watch mode. Same as react-lib-scripts build --watch.

react-lib-scripts watch

lint

react-lib-scripts format

Check your code with ESLint.

Support auto fix code issues with --fix option. (This will also run Prettier for formatting)

react-lib-scripts lint --fix

format

Format code and fix ESLint issues. Same as react-lib-scripts lint --fix.

react-lib-scripts format

test

Run unit tests with Jest. Generate coverage report at coverage.

react-lib-scripts test

Support all Jest CLI options. For example:

# Watch mode
react-lib-scripts test --watchAll

# Update snapshots
react-lib-scripts test -u