有没有人一起来维护一个 npm 工具包

昨天写了第一篇文章，反响平平

一个 NPM 包，帮助数十万程序员提高数十倍效率，难道不开源出来？（一）

首先贴下我们的官网

【预览页】

kennana.github.io/toolkit-use…

我们的推特

【toolkituse】

twitter.com/Toolkituse

我们的github

【toolkit-use】

github.com/KenNaNa/too…

今天我们继续写第二篇文章，来继续优化我们的教程，我们来实现一个复制的功能

首先我们需要安装 clipboard 复制插件

yarn add clipboard

新建我们的 src 目录，在 src 目录下新建 clip/index.ts

根据 clipboard 文档，我们需要将复制的内容，以及复制动作的节点传递给里面的类

import Clipboard from "clipboard";
import { ToolkitUseClipboardOptions } from "../../types/clip";
/**
 * @description: 自定义复制功能
 * @return {*}
 */
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,
    console.log('options', options, this._class)
    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
}

到这里我们还差一个类型

在项目的根目录新建一个 types/clip.ts

/**
 * @description: 复制配置项
 * @param {string} message 复制的内容
 * @param {string} className 复制的类名
 * @param {function} onSuccess 复制成功回调
 * @param {function} onError 复制失败回调
 * @return {*}
 */
export interface ToolkitUseClipboardOptions {
  message: string;
  className: string;
  onSuccess?: () => void;
  onError?: () => void;
}

然后将这个复制的方法，以及类型导出到 src/index.ts

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

这样写完成之后，我们需要到 rollup.config.js 配置打包需要的配置

import babel from '@rollup/plugin-babel'; // 引入babel
import commonjs from '@rollup/plugin-commonjs'; // 引入cjs插件
import { nodeResolve } from '@rollup/plugin-node-resolve'; // 引入resolve
import typescript from 'rollup-plugin-typescript2'; // ts
import { terser } from 'rollup-plugin-terser'; // 压缩打包文件

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

const pkg = require('./package.json'); // 从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()
    ]
};

使用命令行执行

npm run build

最终会在 dist 目录出现 index.esm.js 和 index.umd.js

这样我们就暂时告一段落了，继续关注我们