react-lib-scripts

All-in-one CLI for building React Library

You can check react-lib-starter for the usage.

• Stacks
• Usage
• Commands
• Customize
• Blog

Stacks

Tech stacks used:

• CLI
  • OCLIF
• Bundler
  • Webpack 4
    • css-loader, iso-morphic-style-loader
    • postcss-loader (autoprefixer)
    • url-loader (all images will be base64)
    • webpack-node-externals
  • Babel

Usage

$ npm install -D react-lib-scripts

You can put the command as npm scripts.
"start": "react-lib-scripts start",
"build": "react-lib-scripts build"

Note:
- Node 8+ supported
- `NODE_ENV` environment variable is required.

Set following fields on your package.json
"main": "lib/index.js",
"files": [
  "lib",
  ...
],

Commands

• react-lib-scripts build
• react-lib-scripts help [COMMAND]
• react-lib-scripts start

react-lib-scripts build

Create library bundle

USAGE
  $ react-lib-scripts build

DESCRIPTION
  ...
  Create library bundle

See code: src/commands/build.js

react-lib-scripts help [COMMAND]

display help for react-lib-scripts

USAGE
  $ react-lib-scripts help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI

See code: @oclif/plugin-help

react-lib-scripts start

Start lib development flow

USAGE
  $ react-lib-scripts start

DESCRIPTION
  ...
  Extra documentation goes here

See code: src/commands/start.js

Customize

• Babel
  • You can put .babelrc in the root of your package
• Webpack
  • Create rls.config.js
  • Copy and paste following:

    module.exports = {
      modifyWebpack: (config) => config
    }

• PostCSS
  • You can put postcss.config.js in the root of your package

Blog

https://itnext.io/building-react-library-using-react-lib-scripts-eab6f0fd21f2