Pain points

If you want to publish your React component, it’s not as easy as publishing other JavaScript libraries. First, it has to convert JSX, use Babel to convert the syntax to ES3, and ignore some libraries already used in your project. React, react-dom, etc., and you have to write TypeScript declarations.

Geez, I just want to pull a component out of Modules, why do I need to configure so much trivia?

This scaffolding does just that. It’s as simple as generating a webPack project that’s already configured, compiling it, and publishing it to nPMJs.com.

The installation

npm i -g make-react-npm
Copy the code

Use scaffolding to create the React component library

We created the component library using the Github repository path as a parameter, so that others can link to the Github repository from npmjs.com.

The command to create the project is make-react-npm < your Github account >/< Github repository name >.

Example:

$ make-react-npm ymzuiku/new-project
$ cd new-project && yarn
Copy the code

Notice when writing code

  • Please code the source code in the SRC folder
  • Please modify the public/index.d.ts file to make the TypeScript type declaration for your project easier for others to use
  • Any dependencies, please install into dependencies, and we do not package with the node_modules dependencies, but we install the dependencies of other people automatically when we install this library

release

  • You must have an nPMjs.com account and log in on your computer
  • Set name and version in package.json, which are the NPM package name and package version number, respectively
  • Ensure that the package is available to ensure the quality of the NPM package

Then use the following command to publish

$ yarn build
$ sudo npm publish
Copy the code

You can preview examples of pages on NPMJS after the library is released

Update webpack

Currently, webpack4 and Babel7 are used for compilation. If you need to extend webpack, please modify the webpack file in the scripts folder