How do I develop an NPM package for use by other projects?

When we were developing React projects, we had various scaffolders to choose from (Create React App, Umi, NextJS, etc.). They were configured with Webpack by default, which greatly improved development efficiency.

So how do you develop an NPM package? Is there a scaffold like that?

I recommendTSDX

The reasons are as follows:

  1. By default, CommonJS, UMD and ES Module packages are supported. (This support is necessary to develop a generic NPM package, otherwise you have to do it yourself.)
  2. Own a development environment and compile scripts. One problem you have to solve when developing NPM packages is that you have room to debug while developing and build & pub when publishing (if you have to build before every debug, it is extremely inefficient), but TSDX helps you set up a development environment for debugging while writing code.
  3. TreeShaking is supported by default, effectively reducing project size. (Others may only want to import part of the package and not import the whole package at once, resulting in their project becoming too large.)
  4. TypeScript is used by default. TypeScript’s type definitions do improve the development experience and productivity. If you haven’t used them, start using them now. (I also learned TypeScript while developing my first NPM package.) Of course not, it supports JavaScript.

That’s what I think is the biggest convenience. There are, of course, more advantages: it comes with Prettier, ESLint makes it easier to standardize code style, it comes with JEST for testing, it provides project templates, etc. Of course, these you do not need to also can, to our development has no impact at all.

Let’s get started with TSDX!

Running this command creates a new component development folder. (Mylib is the project name)

npx tsdx create mylib
Copy the code

Halfway through we were asked to choose a template:

template describe
basic For a TypeScript package, you can develop anything with great flexibility
react The package for developing the React component comes with @Types built in and has a Parcel based debugging module for fast development
react-with-storybook Same as react template, but with storybook built in

Let’s choose the second, the React template.

In mylib, the SRC folder is for you to write the source code, example is for you to develop and debug the source code (using your NPM package source code), dist is for you to compile the output directory, the NPM pub will upload dist to NPM.

Run our first project

Each time you develop, you need to open two shells (one for real-time compilation to Dist and one for debugging in Example)

Shells for real-time compilation:

npm start # or yarn start
Copy the code

Shells for real-time debugging:

cd example
npm i # or yarn install
npm start # or yarn start
Copy the code

The former monitors code changes in real time and compiles the latest version into DIST, while the latter monitors dist changes and launches the contents in Example, running the Example project at http://127.0.0.1:1234/ by default.

Now you can try writing something and see if it works 😄

Change a few things

In SRC /index.tsx, the default content is as follows:

import * as React from 'react';

// Delete me
export const Thing = () = > {
  return <div>the snozzberries taste like snozzberries</div>;
};
Copy the code

Note that SRC /index.tsx export is what our NPM package exports. For example, if the NPM package name is my-package, it will be introduced as follows:

import { Thing } from 'my-package';
Copy the code

Let’s look at example/index.tsx:

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Thing } from '.. /. ';

const App = () = > {
  return (
    <div>
      <Thing />
    </div>
  );
};

ReactDOM.render(<App />.document.getElementById('root'));
Copy the code

When testing locally, we definitely can’t release and then test. TSDX does a better job. Here’s what it does:

import { Thing } from '.. /. '; TSX is line 4 of example/index.tsx
Copy the code

It will find the package.json folder in the example folder and import the corresponding contents according to the module or main inside it. (We don’t need to care about these, because it already defines “module”: Dist /mylib.esm.js”, and “main”: “dist/index.js”).

So, in Example /index.tsx, we write some examples using our NPM package, not only for developing-time testing, but also as a “best practice” for our NPM package, killing two birds with one stone.

Also, take a look at example/index.html. When you test with Example, TSDX is actually parcel based and will generate a page based on index.html showing examples from Example /index.tsx. If you need to modify the content in the HTML, you can directly modify, also very convenient! Here is the default code for example/index.html:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Playground</title>
  </head>

  <body>
    <div id="root"></div>
    <script src="./index.tsx"></script>
  </body>
</html>
Copy the code

Release NPM package

Before publishing, you need to compile:

npm build # or yarn build
Copy the code

Sign up at www.npmjs.com/.

Package. json (‘ name ‘in package.json) should not conflict with existing package names. You can write the description and keywords fields in package.json and the readme. md file in the root directory before publishing. They will be displayed on the NPM website, and a clear description will make it easier for people to understand the purpose of the package.

Next, it’s ready to publish!

Log in to NPM from shell first (only need to do it once, no need to do it later) :

npm login
Copy the code

Scripts for publishing NPM packages:

npm publish
Copy the code

Don’t worry if you get it wrong. You can:

NPM unpublish [email protected]# XXXX is the name of your package, followed by @ with its version number
Copy the code

Later releases must have a different version number. No further details in this article, but for those interested in the NPM package version number, check it out.