This project is created to simplify the process of publishing a React component to npm. For a full tutorial on publishing React component to npm, please refer to this guide
Guide
-
Replace contents in /src
with your React component.
-
Edit webpack.config.js
, replace the following:
entry: './src/YOUR_COMPONENT.js'
Replace value of entry
to path to the entry point of your component.
- Replace
output.filename
to the name of your component
output: {
path: path.resolve('lib'),
filename: 'YOUR_COMPONENT.js',
libraryTarget: 'commonjs2',
},
-
Edit package.json
, replace the following:
"name": "YOUR_PACKAGE_NAME"
Replace the value of name
to your package name. This will be the name of the package that is published to npm
and the name that is used when other people install your package using npm install YOUR_PACKAGE_NAME
.
- Update the values of
version
and description
to accordingly.
"main": "./lib/YOUR_COMPONENT.js"
replace YOUR_COMPONENT.js
with the name that you've set in output.filename
during Step #2
- If your component uses any other dependencies, make sure to add them into the
peerDependencies
list.
-
Building your component by running npm build
in your command line. This would generate the folder /lib
which includes your component.
-
Publishing to npm
- Make sure you've registered an npm account
- Run
npm login
in your command line, and enter your credentials.
- Run
npm publish
, and your React component will be uploaded to npm! You can find it at https://www.npmjs.com/package/[YOUR PACKAGE NAME] or your npm profile.
-
To update your package, make sure you remember to increment the version
in package.json
, and then perform Step #5 again.