I released my first NPM component, a REACT BASED 3D tag cloud component. I also encountered a lot of problems along the way. I spent more time perfecting the release process than writing the component itself, so I recorded what I thought was a normal release process for the React component

It ended up taking more time to write this article than it took me to complete the entire component, which I hope will eventually help newbies

Throughout the component release process I did a few things:

  1. The development of component
  2. Write the Readme
  3. Push to Github and put the demo on github page
  4. Publish components to NPM

The development of component

Create the project folder and initialize the NPM package to ensure that the component name you create has not been used by NPM. Here we use react-demo as an example

mkdir react-demo
cd react-demo
npm init
Copy the code

NPM init is the command that generates the initial package.json. During NPM init, you can fill in your component information according to your own needs. Or use NPM init -y as the default and change it later.

Install react-related packages first:

npm i react react-dom -D
Copy the code

Compile related dependencies with Babel:

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D
Copy the code

Use webpack to build, and webpack-dev-server as the local development server, so you need to install the following dependencies:

npm i webpack webpack-cli webpack-dev-server -D
Copy the code

For the sake of simple demonstration, I will only install babel-Loader to compile JSX, other loaders will need to install their own.

npm i babel-loader -D
Copy the code

Install a webpack plugin, html-webpack-plugin, to generate HTML:

npm i html-webpack-plugin -D
Copy the code

Then add the normal start and build scripts, package.json as follows:

{
  "name": "react-demo"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --open development"."build": "webpack --mode production"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/cli": "^ 7.2.3." "."@babel/core": "^ 7.2.2." "."@babel/preset-env": "^ 7.3.1"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.5"."html-webpack-plugin": "^ 3.2.0"."react": "^ 16.7.0"."react-dom": "^ 16.7.0"."webpack": "^ 4.29.0"."webpack-cli": "^ 3.2.1." "."webpack-dev-server": "^ 3.1.14"
  },
  "dependencies": {}}Copy the code

Of course, you can copy the package.json directly and then install the dependencies, or install them one by one.

One of the most basic components only needs to compile JSX, so I did not install CSS and deal with other loaders here, this article is not about Webpack, so the rest can be solved by yourself, if there is a webpack problem can talk to me privately.

Then we create the following directory structure:

├─ An example // ├─ └─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // ├─ SRC // // ├─ SRC // // // // // // // // // // // Package. The json ├ ─ ─ SRC / / component source code │ └ ─ ─ index. The js / / component source code files ├ ─ ─ the babelrc ├ ─ ─ the editorconfig / / don't have to, ├─ └─ webpack.config.js is recommended, though. ├─.gitignore // If you want to put it on Github, you need someCopy the code

Let’s create the simplest component to demonstrate:

/*** src/index.js ***/
import React from 'react';
const ReactDemo = (a)= > (
 <h1>This is my first React NPM component</h1>
);
export default ReactDemo;
Copy the code

Next, add a demo

<! -- examples/src/index.html -->
<html>
<head>
    <title>My First React Component</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <div id="root"></div>
</body>
</html>
Copy the code
/*** examples/src/app.js ***/
import React from 'react'
import { render } from 'react-dom'
import ReactDemo from '.. /.. /src'

const App = (a)= > <ReactDemo />
render(<App />, document.getElementById('root'))

Copy the code

Note that ReactDemo in demo is derived from.. /.. / SRC

Next configure the very simple Webpack by creating the webpack.config.js file under the project root

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
	template: path.join(__dirname, "./example/src/index.html"),
	filename: "./index.html"
});

module.exports = {
	entry: path.join(__dirname, "./example/src/app.js"),
	output: {
		path: path.join(__dirname, "example/dist"),
		filename: "bundle.js"
	},
	module: {
		rules: [{
			test: /\.(js|jsx)$/.use: "babel-loader".exclude: /node_modules/}},plugins: [htmlWebpackPlugin],
	resolve: {
		extensions: [".js".".jsx"]},devServer: {
		port: 3001}};Copy the code

The Webpack configuration file does the following:

  • Use example/ SRC /index.js as the project entry to handle resource file dependencies
  • Js and JSX files are compiled and processed by babel-loader
  • Automatically inject and compile packaged script files via htML-webpack-plugin
  • Start the service of port 3001 for Demo

Babel does two main things: compile JSX to ES5 and add a generic env, so.babelrc is configured as follows:

{
    "presets": ["@babel/preset-env"."@babel/preset-react"]}Copy the code

We can see the previous package.json, I installed Babel 7.x, so the babel-loader should be 8.x, and the Babel 7.x is different from the previous configuration, to use this configuration, the version must be the same as mine. Otherwise, the configuration may be different.

Now run NPM start and then go to localhost:3001.

Write the README

Write a README. If you don’t know how to write a README, I have a few suggestions for you to choose the points you feel are necessary:

  1. logo
  2. The official home page
  3. introduce
  4. The installation
  5. Quick start
  6. Feature list
  7. screenshots
  8. todoList
  9. Deficiency in
  10. FAQ
  11. Change Log

Add a badge

When you’re done writing README, we’ll add some snazzy badges from Shields. IO to let people know we’re cool and professional.

Want to add what kind of badge to see yourself like, there are many kinds.

You can click here to see the README OF the 3D tag cloud I wrote earlier.

It’s almost ready to publish now, but it would be nice to provide an online demo for others to see when using the component.

Publish an online demo on GitHub Pages

Github Pages can be used directly to help us host the online demo, build the production environment version via Webpack, and then send it to Github.

Start by going to Github to create a repository for your component code.

Then initialize your project as a Git project:

git init
Copy the code

Add the remote repository to associate the local repository with the remote repository.

git remote add origin [email protected]:crazylxr/react-demo.git
Copy the code

Next we can install gh-Pages to help us publish to Github Pages:

npm i gh-pages -D
Copy the code

These commands can be written as npm-scriprt for easy memorization and faster subsequent release, so we add two scripts:

{
  "name": "@taoweng/react-demo"."version": "1.0.0"."description": "react demo"."main": "lib/index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --open development"."build": "webpack --mode production"."deploy": "gh-pages -d examples/dist"."publish-demo": "npm run build && npm run deploy"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/cli": "^ 7.2.3." "."@babel/core": "^ 7.2.2." "."@babel/preset-env": "^ 7.3.1"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.5"."gh-pages": "^ 2.0.1." "."html-webpack-plugin": "^ 3.2.0"."react": "^ 16.7.0"."react-dom": "^ 16.7.0"."webpack": "^ 4.29.0"."webpack-cli": "^ 3.2.1." "."webpack-dev-server": "^ 3.1.14"
  },
  "dependencies": {}}Copy the code

The deploy script and publish-demo have been added. NPM run publish-demo can be used when demo needs to be published.

Then we can build the project and publish expamples/ Dist to the GH-Pages branch:

npm run build
npm run deploy
Copy the code

Or directly

npm run publish-demo
Copy the code

Note: only expample/ SRC files will be published to ph-Pages. The master branch is still not on Github. If you want to put the source code on Github’s master or other branches, you still need to push it yourself.

Crazylxr.github. IO /react-demo Crazylxr.github. IO /react-demo Crazylxr = Github username and React -demo = your own crazylxr = Github username and React -demo = your own.

Compile the source code

Our current source code is JSX, so we need to use Babel to compile JSX into code accessible by normal browsers. We can compile our code via babel-cli, directly from the SRC directory to the lib folder. See Babel -cli for more commands

npx babel src --out-dir lib
Copy the code

After executing this command, a lib folder is generated, and the index.js file inside is the compiled file that can be published directly to NPM.

Then write the compile command to script, package.json as follows:

{
  "name": "@taoweng/react-demo"."version": "1.0.0"."description": "react demo"."main": "lib/index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --open development"."build": "webpack --mode production"."compile": "npx babel src --out-dir lib"."deploy": "gh-pages -d example/dist"."publish-demo": "npm run build && npm run deploy"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/cli": "^ 7.2.3." "."@babel/core": "^ 7.2.2." "."@babel/preset-env": "^ 7.3.1"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.5"."gh-pages": "^ 2.0.1." "."html-webpack-plugin": "^ 3.2.0"."react": "^ 16.7.0"."react-dom": "^ 16.7.0"."webpack": "^ 4.29.0"."webpack-cli": "^ 3.2.1." "."webpack-dev-server": "^ 3.1.14"
  },
  "dependencies": {}}Copy the code

To compile the code below SRC later, simply execute:

npm run compile
Copy the code

Now that we have compiled code, we can publish it to NPM for others to use.

Release NPM package

We need some preparation before launching:

To register an NPM account:

Register an NPM account here](www.npmjs.com/).

The login

Enter:

npm adduser
Copy the code

You can also use:

npm login
Copy the code

Then you’ll get a prompt for username, password and **email **, and fill them in the appropriate places.

Points to note about package.json

The configuration information in package.json is very important, so LET me explain a few important configurations.

  • Scoped: @taoweng/react-demo, not react-demo, because NPM packages are so special that they are easy to repeat. This makes the package private and can be made public by NPM publish –access=public.

  • Version: indicates the package version. The package version cannot be the same as the last one. Detailed specifications can be found here

  • Description: Description of the package.

  • Repository: Appropriate Github address. Recommended: :username/:repository.

  • License: authentication. I don’t know what to use, I’ll write MIT.

  • Main: entry file of the package. This is the entry file that was loaded when the package was introduced.

  • Keywords: Add keywords to make it easier for your package to be searched.

More detailed package.json configuration is available on the official website.

I simply added this information here:

{
  "name": "@taoweng/react-demo"."version": "1.0.0"."description": "react demo"."main": "lib/index.js"."repository": "crazylxr/react-demo"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --open development"."build": "webpack --mode production"."compile": "npx babel src --out-dir lib"."deploy": "gh-pages -d example/dist"."publish-demo": "npm run build && npm run deploy"
  },
  "keywords": ["react"."demo"]."author": "taoweng"."license": "MIT"."devDependencies": {
    "@babel/cli": "^ 7.2.3." "."@babel/core": "^ 7.2.2." "."@babel/preset-env": "^ 7.3.1"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.5"."gh-pages": "^ 2.0.1." "."html-webpack-plugin": "^ 3.2.0"."react": "^ 16.7.0"."react-dom": "^ 16.7.0"."webpack": "^ 4.29.0"."webpack-cli": "^ 3.2.1." "."webpack-dev-server": "^ 3.1.14"
  },
  "dependencies": {}}Copy the code

These configuration information will be displayed in the NPM package page, so you can fill in:

Finally, we added.npmignore to the project, which is the same as.gitignore, which is the file and folder to ignore when publishing NPM:

# .npmignore 
src
examples
.babelrc
.gitignore
webpack.config.js
Copy the code

At this point we can publish to NPM:

npm publish
Copy the code

If you are a private package, you can publish it like this:

npm publish --access=public
Copy the code

conclusion

Json, and then run NPM publish and NPM run publish-demo to synchronize NPM and Demo.

However, if you want your component to be used by more people in the community, you need to write the README better and then add automated tests so that others won’t dare to use it.

In addition, before writing components, you can first understand whether there is a similar component, if there is a direct use of it, we will stand on the shoulders of giants, put their precious time on creating value.

The final source code for the entire project is at Github

Refer to the article

  • Publish a React component to NPM from 0
  • Creating and publishing a small and beautiful NPM package is not as hard as you think!

In addition

You can also find this article in these places:

  1. Personal website
  2. github blog

In addition, you can pay attention to my public number: front-end Taoyuan