javascript - How can I export a React Component as an NPM package to use in separate projects? -

i have created react component inside project i'd use in multiple projects. @ moment, care doing locally , development. react component rendered root div, project uses webpack , babel transpile jsx, es6 , es7 features bundle.

i thought simple export component such can run npm install mycomponent , begin using in fresh project. however, find isn't straight forward. in particular, i've been reading hours , hours , seem getting more confused.

if end goal keep developing 'mycomponent' in containing project, while using 'mycomponent' in number of other local projects, options? first thing did change main key of package.json /src/components/mycomponent , run npm pack. produces tgz file can install via absolute filepath in other projects. however, found es6 , jsx not being transpiled , client projects unable parse mycomponent. used webpack transpile lib/mycomponent, when have import mycomponent './path/to/mycomponent-1.0.0.tgz i'd see {} (an empty object) in console.

searching solutions problem turn many different approaches pulling npm, grunt, gulp, babel, webpack, etc.. , worried many many more hours (days?) before can grind down understandable.

given requirements, simplest solution can implement 1) compile down react component simplest import module 2) import local projects 3) continue develop package in original host project , have changes propagate client projects.

in general, if you're going begin creating react components separated packages (which great pattern, reasons you've mentioned) - you're going need @ least bit familiar webpack , babel. there's ton learn here, let me try point in right direction:

// webpack.config.js  /* eslint-disable */ const path = require('path') const webpack = require('webpack')  const environment = process.env.node_env const production = environment === 'production' const sourcemap = !production || process.env.sourcemap  const library = 'your-lib-name' // << rename << const filename = production ? `${library}.min.js` : `${library}.js`  const plugins = []  if (production) {   plugins.push(     new webpack.defineplugin({       'process.env.node_env': json.stringify(environment),     }),     new webpack.optimize.moduleconcatenationplugin(),     new webpack.optimize.uglifyjsplugin({       minimize: true,       output: { comments: false, semicolons: false },       sourcemap: sourcemap,     })   ) }  module.exports = {   devtool: sourcemap ? 'source-map' : 'none',   entry:  `${__dirname}/path/to/your/component.js`, // << rename <<   externals: {     'react': 'react',     'react-dom': 'react-dom',   },   module: {     loaders: [{       test:    /\.js$/,       loader:  'babel-loader',       exclude: /node_modules/,     }],   },   output: {     filename,     library,     path:           `${__dirname}/lib`,     librarytarget:  'umd',     umdnameddefine: true,   },   plugins, } 

i know looks bunch - handles majority of you're going want. in specific:

1. if specify node_env=production when building, uglify/minify package, , other trimming may want later.
2. building script output sourcemap, can use dev tools inspect minified code in debugger window, among other things.
3. this marks react , react-dom externals - means won't bundled , packaged inside bundle. great - because means won't 2+ copies of react's filesize because you've imported own component!

to use it, though, need package.json love.

package.json  {   "name": "your name",   "version": "0.0.1",   "description": "this awesome react package!",   "main": "path/to/your/component.js",   "author": "your name",   "license": "mit",   "repository": { /* repo info here */ },   "dependencies": {     "any-packages-you-need-included-in-builds": "^1.0.0"   },   "devdependencies": {     "babel-cli": "^6.22.2",     "babel-loader": "^7.1.0",     "babel-preset-es2015": "^6.22.0",     "babel-preset-react": "^6.22.0",     "prop-types": "^15.5.10",     "react-dom": "^15.6.1",     "webpack": "^3.0.0"   },   "scripts": {     "build": "yarn prebuild && node_env=production webpack",     "prebuild": "mkdir -p ./lib && rm -rf ./lib/*"   } } 

obviously, can have lot more here if need - such other babel-plugin-* plugins use in transpilation, other packages, etc.but set let webpack build run. note scripts here assume you're using yarn - can run yarn build, , you're on posix system, mkdir work. if you're on windows or not using yarn, update scripts accordingly.

the rest learning publish package npm or package repository. primarily, that's setting version number in package.json new (npm version) , publishing (npm publish). have have npm account this, of course - , logged in (npm login).

once you've published npm can yarn add your-package-name.

remember, though - marked react , react-dom external - in consuming package, you'll need make sure they're available window.react , window.reactdom - or you'll need include component directly node_modules/your-package-name/path/to/your/component.js