Step-by-Step Guide to Building an NPM Package, Publishing to NPM Registry, and Setting Up Documentation (Part 2)
Tags: npm, node, javascript, opensource
Published: 2023-07-11 03:37:24

Translating the second part of the tutorial:

"I wrote the first article yesterday, and the response was average."

[An NPM Package that Helps Hundreds of Thousands of Programmers Increase Efficiency Tenfold, Shouldn't It Be Open-Source? (Part 1)](https://juejin.cn/post/7252989921441398842)

First, let me share our official website:

[Preview Page](https://kennana.github.io/toolkit-use/)

https://kennana.github.io/toolkit-use/

Our Twitter handle:

[ToolkitUse](https://twitter.com/Toolkituse)

https://twitter.com/Toolkituse

And our GitHub repository:

[Toolkit-Use](https://github.com/KenNaNa/toolkit-use)

https://github.com/KenNaNa/toolkit-use

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/071194ab08db4aa880450a5262b603c5~tplv-k3u1fbpfcp-watermark.image?)

Today, we will continue writing the second article to further optimize our tutorial. Let's implement a copy functionality.

First, we need to install the `clipboard` copy plugin:

```bash
yarn add clipboard
```

Create a new `src` directory and inside it, create `clip/index.ts`:

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec9708c8033848f3b0bb720425359945~tplv-k3u1fbpfcp-watermark.image?)

According to the `clipboard` documentation, we need to pass the copy content and the element for the copy action to its class.

```ts
import Clipboard from "clipboard";
import { ToolkitUseClipboardOptions } from "../../types/clip";

class ToolkitUseClipboard {
  private _data: string = '';
  private _class: string = '';
  private _clipboard: Clipboard;
  private _options: ToolkitUseClipboardOptions;

  constructor(options: ToolkitUseClipboardOptions) {
    this._class = options.className;
    this._data = options.message;
    this._clipboard = new Clipboard(this._class, {
      text: () => this._data
    });
    this._options = options;
  }

  copy(): Clipboard {
    this._clipboard.on('success', () => {
      this._options.onSuccess && this._options.onSuccess();
      this._clipboard.destroy();
    });

    this._clipboard.on('error', () => {
      this._options.onError && this._options.onError();
      this._clipboard.destroy();
    });

    return this._clipboard;
  }
}

export {
  ToolkitUseClipboardOptions,
  ToolkitUseClipboard
};
```

We still need to add a type. Create a new `types/clip.ts` file in the project's root directory:

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68d78bfe178a42519ec7255963f19430~tplv-k3u1fbpfcp-watermark.image?)

```ts
export interface ToolkitUseClipboardOptions {
  message: string;
  className: string;
  onSuccess?: () => void;
  onError?: () => void;
}
```

Then export the copy function and the type in `src/index.ts`:

```ts
import { ToolkitUseClipboard, ToolkitUseClipboardOptions } from './clip/index';

export {
  ToolkitUseClipboard,
  ToolkitUseClipboardOptions,
};
```

After writing this, we need to configure the necessary settings in `rollup.config.js`:

```js
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

const extensions = ['.js', '.ts'];

const pkg = require('./package.json');

const version = pkg.version;
const license = pkg.license;
const author = pkg.author;

const banner =
    '/*!\n' +
    ` * ${pkg.name} v${version}\n` +
    ` * (c) 2020-${new Date().getFullYear()} ${author}\n` +
    ` * Released under the ${license} License.\n` +
    ' */';

module.exports = {
    input: 'src/index.ts',
    output: [
        {
            file: 'dist/index.umd.js',
            format: 'umd',
            name: 'utools',
            banner
        },
        {
            file: 'dist/index.esm.js',
            format: 'esm',
            name: 'utools',
            banner
        }
    ],
    plugins: [
        nodeResolve({
            extensions,
            modulesOnly: true
        }),
        commonjs(),
        typescript(),
        babel({
            babelHelpers: 'runtime',
            include: 'src/**',
            exclude: 'node_modules/**',
            extensions
        }),
        terser()
    ]
};
```

Execute the following command in the terminal:

```bash
npm run build
```

You will find the `index.esm.js` and `index.umd.js` files in the `dist` directory.

That's it for now. Stay tuned for more updates.