This repo has the basic setup to be able to build a React Component as an npm module.
It uses Babel for building and just drops everything you had as your module in the dist folder.
It was used to build react-speech-recognizer-component
and does the trick perfectly.
I tried to build an npm module myself and could not find a recipe I could just download and get into coding. So, I made this thing. :)
Before actually start coding, it might pay to try and use this module as it is locally.
For this, you'll need to have another project where you'd try to import the module from your local maching.
For that, follow these steps:
- From where you downloaded this repo, run
npm install
. - Run
npm link
. This command will build the module and make it available to be imported. - Go to the project where you'll test this and run
npm install [path_to_this_repo_in_your_computer]
. - Once the installation is done, wherever you'd like to test the package in your app, go
import ReactNpmModuleBoilerplate from '[path_as_it_appears_in_package.json]'
. So, after installing, check your package.json forreact-npm-module-boilerplate
and use its value as the path for the import.
You should get this repo component rendering in your app. You can use this same technique to test the one you will build.
- Update what's in the package.json with the information corresponding to your package (name, description and repo).
- Remove what's in the
src
folder. - Start writing your component!
build
: This is the one that transpiles the code to ES5 using babel.prepare
: It's a hook that's run when you try topublish
your module. It's set to build the package.update
: Bumps the version up and publishes the new module version.
- I guess I could add support to load CSS if required.