Step-by-Step Guide to Building an NPM Package, Publishing to NPM Registry, and Setting Up Documentation (Part 2)

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)

First, let me share our official website:

Preview Page

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

Our Twitter handle:

ToolkitUse

https://twitter.com/Toolkituse

And our GitHub repository:

Toolkit-Use

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

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:

yarn add clipboard

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

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

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:

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

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

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

export {
  ToolkitUseClipboard,
  ToolkitUseClipboardOptions,
};

After writing this, we need to configure the necessary settings in rollup.config.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:

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.