How to create NPM package for a React component - (using Webpack + Babel).

Recently I was working on creating a NPM package for a react component. Tried my hands on writing a react radio button component, with webpack and ES6.

You can checkout the source code in github repository: https://github.com/tan31989/react-radio-button and the npm repository link is: https://www.npmjs.com/package/react-radio-button.

Here is a quick update on the webpack I used for production and deploying the react component as a library so that others can use it:

webpack.config.build.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    /** This section is basically the hook for letting the webpack scan your code
     * to find that right set of files to bundle up for the library you would
     * want to expose. In my case, the file inside src/components is where 
     * I have the file to be provided as a library.
     * This section is also known as entry point
     */
    './src/components/RadioButtonGroup'
  ],
  output: {
    /** This section takes care of outputting the entire set of files 
     * scanned from the entry point to the loader module of include/exclude
     * directories as a bundled file.
     */
    path: path.join(__dirname, 'lib'),
    filename: 'index.js',
    /** Very important: the target type for our library tells us how to 
     *  export the ES6 react component for others to use and also to be able to
     *  find the component from node_modules. 
     *  The UMD pattern typically attempts to offer compatibility with the
     *  most popular script loaders of the day (e.g RequireJS amongst others).
     *  In many cases it uses AMD as a base, with special-casing added to handle
     *  CommonJS compatibility.
     */
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],
  resolve: {
    modulesDirectories: ['node_modules', 'index'],
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.js?/,
        exclude: /build|node_modules|styles/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.css$/,
        loader: 'style!css'
      }
    ]
  },
  /** "externals" property on the config object "to specify dependencies for
   *  your library that are not resolved by webpack, 
   *  but become dependencies of the output.
   * This means they are imported from the envirnoment while runtime.
   */
  externals: [
    {
      react: {
        root: 'React',
        commonjs2: 'react',
        commonjs: 'react',
        amd: 'react'
      }
    }
  ]
};

Here is the thing, a component of react written in ES6, requires the right loaders that can understand the code (babel-loader) and also the right target library, entry point and output point. With that in note, do remember, you need to add some more important things in:

package.json

{
  ...,
  "main": "lib/index.js",
  "scripts": {
    "dev": "NODE_ENV=development npm start",
    "start": "webpack --config webpack.config.dev.js && node devServer.js",
    "build": "NODE_ENV=production webpack --config webpack.config.build.js",
    "prepublish": "npm run build"
  },
  ...
}

• "main" from package json ensures about the library getting picked up, once it is been downloaded using npm install.
• "prepublish" will ensure to run the build command, when we are about to deploy/publish to npm.

Only Publish:
To directly publish to Npm without version update run the command:

$ npm publish

This will ensure, the package is published to the npm

Release and Publish:
To release a git tag and to npm publish the package:

• Just use the npm version <update_type>, where update_type is either major, minor or patch number.

$ npm version 1.5.4

• Automatically updates the package.json
• Once the data is changed and pushed to git, just publish using npm publish.

$ npm publish

NOTE:

• To publish, you must have a user on the npm registry. 
• If you don't have one, create it with npm adduser. 
• If you created one on the site, use npm login to store the credentials on the client.
• Check how to do so: https://docs.npmjs.com/getting-started/publishing-npm-packages.

Do let me know if there is any more information needed or you feel that I can give some assistance.