Base structure in Webpack 4 for the creation of npm modules in React
1. Clone
git clone https://github.com/kevoj/react-webpack-component.git your-react-component-name
cd [your-react-component-name]
npm install2. Set name of the library
Replace in package.json
{
"name": "your-react-component-name",
...
}3. Create Link
npm run build npm link
Watch changes in mode development
npm start
Compile in mode production
npm run Build
|-- dist/lib (Compiled) | `-- index.js |-- src/lib (Your code here, view example in code source...) | |-- Button/index.js | `-- index.js `-- webpack.config.js
cd Existing-React-Project
npm link your-react-component-nameimport React, { Component } from 'react'; import { Example } from 'your-react-component-name' class HelloWorld extends Component { render() { return ( <Example /> ); } } export default HelloWorld;
1. Compile to production
npm run build
2. Login
npm login
# login with your credentials in https://www.npmjs.com/3. Upload package
Note: Verify your version of the component in package.json, you can not upload the same version twice
npm publish
# Available in https://www.npmjs.com/package/your-react-component-nameNow, you can install your package with:
npm install your-react-component-name--save
# :)MIT © Leonardo Rico