关于javascript:用-rollup-gulp-造个轮子别说还挺香

前戏

我是 16 年入了前端的坑，17 年晓得了 gulp 和rollup这两个玩意儿。因为那时 webpack 势头很猛，便始终没有正眼瞧过它一眼。

直到 20 年进了一家小公司，做了很多相似的小我的项目，雷同的代码拷来拷去，呈现一个 bug 一堆我的项目都要改，切实恶心到我了。

于是不得不开始思考将一些公共的办法和组件提取进去，做成一个第三方库来保护。而在库的封装方面，rollup绝对于 webpack 具备肯定的劣势。

在此，便和大家分享一下如何本人造轮子，封装一个前端库并公布到 npm 仓库中去。

源码

这是我本人封装的 3 个库，有趣味能够看看：

https://github.com/moohng/dan;

https://github.com/moohng/dui;

https://github.com/moohng/tui;

第一个是工具函数库，前面两个是 UI 库，目前已全副应用 TypeScript 重写。dui是基于 Vue 3 封装的，tui无任何依赖，通过 tsx 语法实现的。

因为前面没多久就到职了，也就没有封装更多办法和组件进去了，但还是具备肯定的学习参考价值，尤其对于老手敌人。

每一个库从 目录构造、打包命令、导出形式、ts 类型反对、单元测试、主动公布 等，简直所有细节常识都涵盖到了。

实操

浏览百遍，不如实操一遍（文章基于 tui 来做介绍）。

目录构造

另外，还有 lib 和dist两个打包输入的目录没有列出来。

从上到下：

• .github：GitHub 主动打包公布的脚步配置目录；
• packages：寄存 tui 组件库的源码；
• src：tui 组件库演示 demo 目录；
• test：测试相干代码；
• webpack：临时疏忽，用于测试 webpack 打包用的；

前面的 babel.config.json、gulpfile.esm.js、rollup.config.js、tsconfig.json 别离是 babel、gulp、rollup、ts 的配置文件。

环境配置

tsconfig.json配置如下：

{
  "compilerOptions": {
    "jsx": "preserve", // 反对 jsx
    "module": "esnext",
    "target": "esnext",
    "declaration": true, // 生成相应的 .d.ts 文件
    "declarationDir": "lib", // 生成申明文件的输入门路
    "noEmitOnError": true,
    // "strict": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "skipLibCheck": true,
    "moduleResolution": "node"
  },
  "include": ["packages/**/*"],
}

在配置文件中，须要开启 jsx 的反对，因为 tui 的 html 是基于 jsx 语法来实现的；同时启用生成 .d.ts 文件性能，这个性能能够在 ts 编译的时候依据咱们的源码主动生成 .d.ts 类型申明文件。

babel的配置绝对要简单一些，次要是对 tsx 的反对上。

局部配置源码如下：

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "pragma": "Tan.createElement", // 相似于 React.createElement 办法
        "pragmaFrag": "Tan.Fragment", // 相似于 React.Fragment 片段
        "importSource": false,
        "useSpread": true
      }
    ],
    [
      "@babel/preset-typescript",
      {
        "isTSX": true,
        "jsxPragma": "Tan",
        "allExtensions": true
      }
    ]
  ]
}

• @babel/preset-react：用于解析 jsx 语法，生成 Tan.createElement('div', {}) 这种 js 函数构造；
• @babel/preset-typescript：将 ts 转成 js，代替tsc 命令；

组件的实现

以最简略的 Toast 组件为例。

性能：

• 提供通用、胜利、失败、告诉、正告、加载中等几种状态；
• 反对上、下、居中等地位弹出；
• 反对一般调用和快捷调用多种调用形式；

组件结构设计（非残缺代码）：

// packages/Toast/index.tsx

/** 组件入参 */
interface ToastOptions {
  text?: string; // 字符串 或 html 模板
  type?: 'success' | 'error' | 'info' | 'warn' | 'loading' | 'toast';
  margin?: string;
  duration?: number;
  position?: 'top' | 'bottom' | 'center';
}

/** 组件对象（反对函数调用和快捷方式调用）*/
interface ToastObject {(options: string | ToastOptions): ToastHide;
  info: ToastFunction;
  success: ToastFunction;
  error: ToastFunction;
  warn: ToastFunction;
  loading: ToastFunction;
}

interface ToastFunction {(text: string): ToastHide;
}

interface ToastHide {(): void;
}

/** 函数实现 */
const Toast: ToastObject = (options) => {// ...}

/** 组件导出 */
Toast.info = (text: string) => Toast({text, type: 'info'});
Toast.success = (text: string) => Toast({text, type: 'success'});
Toast.error = (text: string) => Toast({text, type: 'error'});
Toast.warn = (text: string) => Toast({text, type: 'warn'});
Toast.loading = (text: string = '正在加载') => Toast({text, type: 'loading'});

export default Toast;

组件构造有了，当初次要就是 Toast 函数的实现了。

开始无外乎就是对参数的判断，而后就是生成对应的 DOM 构造，最初插入到实在的 DOM 文档中去。

这里次要说一下 jsx 的实现，上面是 Toast 组件的 jsx 源码：

// 创立 DOM
let $toast = options.type === 'loading' ? (
  <>
    <div className="mask loading"></div>
    <div className="tui-toast" dataType={options.type} dataPosition={options.position}>
      <i className="tui-icon__loading"></i>
      <span>{options.text ?? ''}</span>
    </div>
  </>
) : <div className="tui-toast" dataType={options.type} dataPosition={options.position}>{options.text ?? ''}</div>;

是不是看起来跟 React 很像？没错，这就是咱们须要的。

还记得下面 babel 中配置的 Tan.createElement 吗？它就是为了将咱们这里的 jsx 语法转成 Tan.createElement 的函数模式。

看看编译后的代码（局部）：

Tan.createElement(
  Tan.Fragment,
  null,
  Tan.createElement('div', {className: 'mask loading',}),
  Tan.createElement(
    'div',
    {
      className: 'tui-toast',
      dataType: options.type,
      dataPosition: options.position,
    },
    Tan.createElement('i', {className: 'tui-icon__loading',}),
    Tan.createElement(
      'span',
      null,
      (_options$text = options.text) !== null && _options$text !== void 0 ? _options$text : ''
    )
  )
)

其实 React 也是一样，它也是通过 babel 将 jsx 语法转成了 React.createElement 函数模式。同样的，咱们也能够将 React.createElement 换成咱们本人实现的函数。jsx 并非 React 独有，Vue 同样也反对，谁都能够应用，关键在于如何转换的问题。

Tan.createElement 的实现

我实现的比较简单，一共也才几十行代码，满足一些根本罕用的语法。

全副源码如下：

// packages/core/index.ts
import {flat} from '@moohng/dan';

interface FragmentTag {Fragment: DocumentFragment;}

type TagMap = HTMLElementTagNameMap & FragmentTag;

function createFragment() {return document.createDocumentFragment();
}

export const Fragment: keyof FragmentTag = 'Fragment';

const hasOwnProperty = Object.prototype.hasOwnProperty;
const toString = Object.prototype.toString;

function classnames(className: string | Record<string, boolean> | (Record<string, boolean> | string)[]): string[] {if (typeof className === 'string') {
    const splitter = /\s+|\s*,\s*/;
    return className.split(splitter).filter(item => item);
  }
  if (Array.isArray(className)) {const r: string[] = [];
    className.forEach(item => {r.push.apply(r, classnames(item));
    });
    return r;
  }
  if (toString.call(className) === '[object Object]') {return classnames(Object.keys(className).filter(item => className[item]));
  }
  return [];}

export function createElement<K extends keyof TagMap>(node: K | TagMap[K] | HTMLElement, props?: Record<string, unknown>, ...children: (HTMLElement | string | HTMLElement[] | string[])[]) {
  // 创立 DOM
  if (typeof node === 'string') {if (node === Fragment) {(node as unknown as DocumentFragment) = createFragment();} else {node = document.createElement(node);
    }
  }
  // 设置属性
  props && Object.keys(props).forEach(key => {
    // 如果是 on 结尾，则为事件监听
    const eventType = key.match(/^on(\w+)$/)?.[1];
    if  (eventType && typeof props[key] === 'function') {(node as TagMap[K]).addEventListener(eventType.toLocaleLowerCase(), props[key] as EventListenerOrEventListenerObject, false);
    } else if (key === 'style' && typeof props[key] !== 'string') {const style = props[key] as any
      for (const k in style) {if (hasOwnProperty.call(style, k)) {(node as HTMLElement).style[k] = style[k];
        }
      }
    } else if (key === 'className') {const className = classnames(props[key] as any);
      (node as HTMLElement).classList.add.apply((node as HTMLElement).classList, className);
    } else {const _key = key.replace(/[A-Z0-9]/g, v => '-' + v.toLocaleLowerCase());
      if ((node as any).setAttribute) {(node as HTMLElement).setAttribute(_key, props[key] as string || '');
      }
    }
  });
  // 增加子节点
  const childNodes = flat(children.filter(item => item || typeof item === 'number'));
  (node as TagMap[K]).append.apply((node as TagMap[K]), childNodes as Node[])

  return node;
}

createElement 函数很简略，次要就是创立 DOM 节点，正确的解析 props 参数。

有了 createElement，只须要在对应的jsx 文件中引入就行了。

import * as Tan from '../core/index';

这也是为什么 React 组件都须要在文件头部引入 import * as React from 'react'; 的起因。

编译打包

先看 package.json 中定义的scripts：

"scripts": {
  "serve": "parcel serve index.html --dist-dir build/cache --no-cache",
  "build:css": "gulp css",
  "build:types": "tsc --emitDeclarationOnly",
  "build:es": "babel packages -d es -x \".ts,.tsx\"--env-name es",
  "build:lib": "babel packages -d lib -x \".ts,.tsx\"","build:dist":"rollup -c","build":"npm run build:types && npm run build:es && npm run build:lib && npm run build:dist && npm run build:css","type-check":"tsc --noEmit","test":"jest"
},

• tsc --emitDeclarationOnly命令就是生成 .d.ts 文件；
• babel packages -d lib -x \".ts,.tsx\"命令就是将 packages 目录中的组件编译到 lib 目录；

通过这两条命令组件的 js 局部就算是搞定了。

组件的 css 款式我是放在全局的，其实大部分的 UI 框架的款式文件也都是在全局定义的，这跟咱们开发我的项目不同。

款式的编译，其实也就是将 scss 转成 css 和一些其余转换、压缩等操作，这里，我是通过 gulp 将这些操作组合起来的。

gulpfile.esm.js局部配置源码：

import {src, dest, parallel} from 'gulp';

import sass from 'gulp-sass';
import postCSS from 'gulp-postcss';
import autoprefixer from 'autoprefixer';

export function css_lib(cb) {src(['packages/**/style/*.scss'], {base: 'packages',})
    .pipe(sass({outputStyle: 'expanded',}))
    .pipe(postCSS([autoprefixer()]))
    .pipe(dest('lib'));

  cb();}

到这里为止，咱们的组件库的 lib 输入目录就算实现了，lib目录次要是为了不便咱们对单个组件的引入。但通常，一个组件库还须要反对 script 标签引入（一次性引入）。

所以咱们还须要将所有的组件库代码进行打包，提到打包，rollup便就派上用场了。

// rollup.config.js
import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import {terser} from 'rollup-plugin-terser';

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

module.exports = {input: path.resolve('packages/index.ts'),
  plugins: [resolve({ extensions}),
    babel({
      extensions,
      include: ['packages/**/*'],
    }),
  ],
  output: [
    {
      file: 'dist/tui.js',
      format: 'umd',
      name: 'tui',
      // https://rollupjs.org/guide/en#output-globals-g-globals
      globals: {},},
    {
      file: 'dist/tui.min.js',
      format: 'umd',
      name: 'tui',
      // https://rollupjs.org/guide/en#output-globals-g-globals
      globals: {},
      plugins: [terser(),
      ],
    },
  ],
};

这个就和咱们开发我的项目时用的 webpack 打包工具一样，能够指定导出形式，以及对代码进行压缩混同。

到这里，一个根本的 UI 库才算实现。

留神打包和编译的概念，编译仅仅是通过 babel 或 sass 将源码转换成浏览器能反对的 js 或 css 代码；而打包是在编译的根底之上，再将源文件进行整合，输入一个或多个文件。rollup 和 webpack 一样，都是打包工具，gulp 是工作（流程）管理工具。

单元测试

最初，还有“不那么重要”的测试。

说实话，本人设计组件本人写的代码而后本人写测试，有点像“脱裤子放屁——多此一举”了。兴许是我对测试的了解还不够深刻吧，毕竟大佬们都说测试有多重要，咱不懂、咱也不敢问，暂且装腔作势地写上吧。

测试框架选用的是jest，据说是很弱小的货色。

在我的项目根目录下创立一个 test 目录，外面写的测试文件以 .test.ts 后缀命名，测试的时候就能够主动执行了。

比方（局部源码）：

// createElement.test.tsx
import * as Tan from '../lib/core';

test('jsx', () => {
  const text = 'Hello World';
  const handleClick = (e: MouseEvent) => {(e.target as HTMLDivElement).innerText = '你好';
  }
  const test = <div dataType="success" onClick={handleClick}>{text}</div>;

  expect(test.textContent).toBe(text);
  expect(test.getAttribute('data-type')).toBe('success');

  test.click();
  expect(test.innerText).toBe('你好');
});

// import {Toast} from '../lib';
import {Toast} from '../lib';

test('toast loading', done => {
  const text = '玩命加载中...';
  const hide = Toast.loading(text);

  expect(document.querySelector('.tui-toast span').textContent).toBe(text);
  setTimeout(() => {hide();
    setTimeout(() => {expect(document.querySelector('.tui-toast')).toBeNull();
      expect(document.querySelector('.mask')).toBeNull();}, 100);
    done();}, 1000);
});

主动公布

如果每次提交代码后，会主动公布到 npm 仓库，是不是省了很多事儿。以前，这种事大多都是通过 Travis CI 去做的，不过当初，Github 自身就反对该性能了，是不是很赞。

# .github/workflows/npmpublish.yml
name: npm

on:
  release:
    types: [created]

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 12
          registry-url: https://registry.npmjs.org/
      - run: yarn --frozen-lockfile
      - run: yarn build
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

下面这个配置就是在每次创立一个 release 版本的时候，会主动将咱们的代码编译打包，公布到 npm 仓库中去。须要提前配置好 NODE_AUTH_TOKEN 变量，npm_token能够去 npm 平台获取，而后在 GitHub 仓库的 Settings 外面配置就行了。

完事

如果你喜爱造轮子，这篇文章应该会对你有帮忙，这是我踩了很多坑才摸索进去的。文章只能说个大略流程，强烈建议去 GitHub 上看源码。

最初，欢送去我的公众号【末日码农】，获取更多技术常识。