CODEWITHSUNDEEP
javascriptreactjscreate-react-app
Ido Ran
Ido Ran

Reputation: 11374

Using create-react-app to create a library

I'm trying to create a library of React-Redux and I'm trying to use create-react-app to get the boilerplate code but it include in the build script things like appHtml which are irrelevant.

Is there a way to turn ejected create-react-app to library - specifically I need to not package all js files into one but instead just pass them through babel and produce separate files for each React Component?

Upvotes: 14

Views: 10218

Answers (4)

Bender
Bender

Reputation: 647

Maybe you could bootstrap youre projects with js-library-boilerplate. I've use it several times and it's good enough to give it a try. It can be used as a base for the vanila js libs or react libs (use CRA under the hood).

To use it all you need, is to:

  • clone repo

  • make some changes as:

  • Edit LICENSE file

  • Edit package.json information (These will be used to generate the headers for your built files)
  • Edit library: "MyLibrary" with your library's export name in ./config/webpack.config.js
  • Edit ./bin/postinstall (If you would like to display a message on package install)

...and you a ready to go. Also all configs are open so you can adjust it as you require. Good luck!

Upvotes: 0

Julius Koronci
Julius Koronci

Reputation: 417

this is is the best I have found so far..uses create-react-app for libraries https://github.com/Rubbby/create-react-library

Upvotes: 2

madox2
madox2

Reputation: 51841

I have managed to build library without ejecting and using internal dependencies of create react app. I've tested it with [email protected]. At first you need to install babel-cli:

npm install --save-dev babel-cli

create .babelrc file with content:

{
  "presets": ["react-app"]
}

Then add script to package.json:

"compile": "NODE_ENV=production babel src --out-dir lib --copy-files",

And finally run:

npm run compile

This will compile all sources from src to lib directory and simply copy the remaining files. Don't forget to declare the main file in package.json (e.g. "main"="lib/index.js").

However there is one caveat. If you are using files which cannot be compiled with babel (e.g. css or fonts) then the users of your library would need to set up appropriate (webpack) loaders.

Upvotes: 20

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

Edit the following in the package.json

  1. name
  2. description
  3. scripts
  4. author
  5. license
  6. gitRepository

and do npm publish. It'll publish your library in npm

Upvotes: 2

Related Questions