🛠️ All-in-one CLI for building React Library
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin init commit Jun 17, 2018
src fix hardcoded bug Jun 18, 2018
.editorconfig init commit Jun 17, 2018
.eslintrc add modifyWebpack Jun 17, 2018
.gitattributes
.gitignore init commit Jun 17, 2018
.prettierrc init commit Jun 17, 2018
LICENSE Create LICENSE Jun 17, 2018
README.md Add medium link Sep 8, 2018
package.json add npm keywords and bump Jun 18, 2018
yarn.lock

README.md

react-lib-scripts

All-in-one CLI for building React Library

oclif Version Downloads/week License

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

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

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