Write a React plugin that can be published to NPM

preface

When writing React projects, the create-React-app scaffolding is more convenient. However, if you want to write a plugin, the three-way scaffolding is a bit cumbersome. We can configure a simple tool that is suitable for our development. How to develop a React plugin, let’s start 😊

The preparatory work

If you want to do a good job, you must sharpen your tools first. Let’s choose the type

Typescript

For ease of development, we use Typescript as the development language, which allows instant type checking and also installs (extremely hard),

Note: Typescript is optional, you can also choose JS slash-and-burn, but it’s best to write in Typescript, after all, it’s 9102, it’s 😄

webpack + babel

We will use the familiar WebPack as the packaging tool first (we will try to change it to rollup later)

jest + travis + coveralls

Jest as a tool for testing our code, Travis, An online continuous integration tool (to help you package, build, run scripts commands, code tests, etc.) using Coveralls can generate badges based on the code coverage generated after Travis code tests.

The directory structure

Let’s organize the directory structure in general

React - yan - progress ├ ─ ─ the build / / packaging │ └ ─ ─ YanProgress. Min. Js ├ ─ ─ SRC / / source │ ├ ─ ─ index. The CSS │ └ ─ ─ index. The TSX ├ ─ ─test/ / test file │ └ ─ ─ YanProgress. Test. The js ├ ─ ─ the index, which s / / declaration file (ts) ├ ─ ─ jest. Config. Js / / jest test configuration file ├ ─ ─ webpack. Config. Js / / ├── ├── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ── ─Copy the code

Developer options

All dependent packages are as follows

{
    "devDependencies": {
	"@babel/core": "^ 7.1.6." "."@babel/preset-env": "^ 7.1.6." "."@babel/preset-react": "^ 7.0.0." ".// for react
        "@types/react": "^ 16.7.18".// Declaration file
        "@types/react-dom": "^ 16.0.11".// Declaration file
        "babel-loader": "^ 8.0.4"."chai": "^ 4.2.0".// Test the assertion library
        "coveralls": "^ 3.0.2." ".// Code coverage
        "css-loader": "^" 1.0.1."jest": "^ 23.6.0".// Test tools
        "react": "^ 16.7.0"."react-dom": "^ 16.7.0"."style-loader": "^ 0.23.1"."ts-loader": "^ 5.3.2." "./ / ts
        "typescript": "^ 3.2.2." "./ / ts
        "webpack": "^ 4.25.1"."webpack-cli": "^ 3.1.2." "}}Copy the code

The command configuration is as follows: package.json

{
    "scripts": {
        "build": "webpack --config webpack.config.js --progress --colors"."test": "jest ./test/YanProgress.test.js"."coveralls": "cat ./coverage/lcov.info | coveralls"}},Copy the code

Webpack configuration

We use webpack4, see the official website for detailed configuration, portal

const path = require('path');

module.exports = {
	mode: "production".// Production mode
	entry: { / / the entry
		"YanProgress": path.resolve(__dirname, './src/index.tsx')},output: { / / export
		path: path.resolve(__dirname, './build'),
		filename: '[name].min.js'.publicPath: "./build/".libraryTarget: 'umd'.// Packing method
		library: 'YanProgress'.// Export variables
		libraryExport: 'default'.// Export by default
	},
	module: {
		rules: [{test: /\.tsx? $/.use: [{loader: 'babel-loader'.options: {
							presets: ['@babel/preset-env'."@babel/preset-react"]}}, {loader: 'ts-loader'./ / ts}].include: path.resolve(__dirname, "./src/"), // Parse only files in the SRC directory
			},
			{

				test: /\.css$/.loader: "style-loader! css-loader? modules&localIdentName=[hash:8]"./ / css_modules configuration details http://www.ruanyifeng.com/blog/2016/06/css_modules.html
				include: path.resolve(__dirname, "./src/"),}},resolve: { // If the file suffix is omitted, the following configuration is used by default
		extensions: ['.ts'.'.tsx'.'.js'],},externals: { // Do not pack react
		react: 'react'}};Copy the code

[选读] Typescript configuration

Since we want to import CSS modules in the TS file, but THE TS does not recognize them, we need to do the following configuration

Create a new index.d.ts declaration file in the root directory of the project

declare module '*.css';
Copy the code

Start writing plug-ins

Here is an example as usual for development components

// jsx
import React from 'react';

class YanProgress extends React.Component{
	render() {
		return (
			<div>SAO year, write code happy, see me why 😄, quickly roll to write code, don't forget to point a star 😂</div>); }}export default YanProgress; // Remember to export, SAO Nian
Copy the code

You can look directly at the code I wrote (CTRL + C, CTRL + V), the source code is here, click me

Install dependencies and code compression packages

Webpack4 compresses the code by default, so we simply execute the scripts command configured by package.json

$ yarn
$ yarn run build
Copy the code

The test code

For unit tests, you can create an XXX.test. js test file in the test directory, write test cases (using the Expect style of the CHAI assertion library), and run the following command
```
$ yarn run test
Copy the code
```
If you also want to import YanProgress from ‘react-yan-progress’ as an NPM package to test, you can run the following command

In your project root directory, open the terminal and run the following command to create the link
```
$ yarn link
Copy the code
```
Import YanProgress from ‘react-yan-progress’ in the root directory of the demo project you want to test.
```
$ yarn link react-yan-progress
Copy the code
```

Continuous integration

Here we use the convenient Travis online test tool and the test code coverage tool Coveralls, which is available at travis-ci.org

I will skip the registration process, after all, there are already many tutorials (programming for Google 😂)

Create a new.travis. Yml file in the project root directory and configure it as follows

language: node_js # Runtime environment
node_js:
  - "10.6.0" # version
branches:
  only:
  - master Only the main branch can
before_install:
    - export TZ='Asia/Shanghai' If your project involves time processing, you need to set the time zone
install: yarn install Install the NPM package
script: # execute command
  - yarn run build # packaged
  - yarn run test # test
after_success: Run the following command after success
  - yarn run coveralls # Test code coverage
Copy the code

Release NPM package

To register an NPM account, skip the procedure

Before you do, check the NPM website to see if your package name has been preempted

Run the following command

$ npm publish
Copy the code

Upgrade package run the following command (X.X.X -> major.minor.patch)

$ npm version patch
Copy the code

Open source contributions

Embrace open source, so that the community, and even the industry, will be more motivated

Note: For example, your star is the biggest encouragement to me and the motivation to support me to continue to open source

The React – awesome componets community – the React – components
Other communities are availableGithubexplore

End scatter flower 🎉

👏 Welcome to join me in doing ji (Github) 😊

Project address github.com/Yangfan2016…
Yangfan2016.github. IO