I've made the video tutorial on how to create an NPM Package from your React Component. And in this article, I'd like to illustrate it with code. All details you can find in the GitHub repo of this tutorial.
Package setup ./package.json:
{
"name": "super-lemon",
"version": "1.0.0",
"description": "",
"main": "./build/index.js",
"scripts": {
"build": "webpack"
},
"author": "guandjoy",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.5",
"@babel/preset-env": "^7.7.6",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.3.0",
"style-loader": "^1.0.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"@material/react-button": "^0.15.0",
"prop-types": "^15.7.2",
"react": "^16.12.0"
}
}
Babel presets ./.babelrc:
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}
Webpack configurations ./webpack.config.js:
var path = require("path");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve("build"),
filename: "index.js",
libraryTarget: "commonjs2"
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
externals: {
react: "react"
}
};
Our React Component ./src/index.js:
import React from 'react'
function Component() {
return <div>Our package</div>
}
export default Component
Once you created all the files, you can build a bundle:
npm run build
Create a link to test it locally, before publishing:
npm link
And don't forget to use the instance of React from the environment you were going to test it:
npm link ../path/to/application/node_modules/react
Publish, once it works:
npm publish
Thanks for watching! Hope it helped you to develop your own not a lemon library 😊
Top comments (3)
I'm glad it helped :) And sorry for the belated answer.
Unfortunately, I have no experience working with react-native. But I think you can if it works for you. You should only somehow exclude React Native from your bundle.
Maybe this article will help: dev.to/kylessg/developing-npm-modu...
It helped me a lot, thanks!
I noticed that in dependences on package.js you have "@material/react-button": "^0.15.0", and maybe someone who doesn't understand may end up adding this dependency to their package without the real need.