使用TS+rollup打造一個npm工具庫

前言

Why Not TS？

環境搭建

工具配置

編寫代碼

打包&發布

總結

示例代碼

相關資料

前言

說到Rollup，大家可能并不陌生，它是一款JS的模塊打包器，適合對工具庫和組件進行打包，將多個模塊合并成單個文件，與Webpack，Browserify等不太一樣，其對更小更快的庫比較友好。此外，他可以生成ESM、CommonJS、AMD 和 UMD等輸出格式，并且支持TS輸入，可以檢查TS類型及代碼

Why Not TS？

近期也在更新TS的文章，tsc是可以直接將TS編譯成指定的JS的，那么為什么不直接使用TS編譯？

其實在早期編寫工具包的時候使用的是TS編譯，后來為了兼容不同環境產出了這篇文章，用于做Node早期版本以及新版本的適配，然而在使用UMD時出現了問題：

我們知道在tsconfig中使用"module": "UMD"編譯時，并沒有像官方文檔中的代碼，生成以下的代碼

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["libName"], factory);
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory(require("libName"));
    } else {
        root.returnExports = factory(root.libName);
    }
}(this, function (b) {

而是生成了下面的代碼，只針對cjs和amd做了適配，導致全局環境中取不到對應的聲明，關于這個在很早就有人提出過

if (typeof module === "object" && typeof module.exports === "object")
...
else if (typeof define === "function" && define.amd)
...

這對瀏覽器的script形式不太友好。除了這個問題之外，在使用ESM打包后產生的文件引入模塊時不會自動生成.js后綴，需要每次手動補上.js，這使在瀏覽器端使用依賴雪上加霜，參考這篇文章，通過手動增加.js后綴或使用腳本解決此問題

這些問題驅使我使用起了打包工具

rollup能夠解決上述的問題，并且使代碼打包更規范統一

環境搭建

參照這篇文章配置npm環境，參考這篇文章安裝TS

在工具庫或新文件夾中使用pnpm init初始化

然后使用pnpm i --save-dev @rollup/plugin-alias @rollup/plugin-json @rollup/plugin-node-resolve @rollup/plugin-typescript rollup rollup-plugin-terser tslib typescript 安裝rollup以及一些常用的開發依賴

其中

@rollup/plugin-alias：在代碼中使用別名來引用模塊。這里我們可以用于給ESM引入.js后綴
@rollup/plugin-node-resolve：解析第三方模塊的依賴關系
@rollup/plugin-typescript：支持對TypeScript代碼的打包
rollup：模塊打包器
rollup-plugin-terser：Terser壓縮代碼，減小文件大小
tslib：如果在tsconfig中配置了lib就需要使用tslib依賴
typescript：使用TS語法和類型系統

工具配置

安裝并了解了rollup依賴及插件后，我們就要對打包工具進行配置了

在根目錄新建rollup.config.js配置文件，輸入以下代碼

import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";
import { readFileSync } from "fs";
import { terser } from "rollup-plugin-terser";
import alias from "@rollup/plugin-alias";
const packageJson = JSON.parse(readFileSync("./package.json", "utf8")); // 讀取UMD全局模塊名，在package中定義了
const pkgName = packageJson.umdModuleName;
export default {
  input: "src/index.ts",
  output: [
    {
      file: "dist/esm/index.js",
      format: "esm",
    },
    {
      file: "dist/cjs/index.js",
      format: "cjs",
    },
    {
      file: "dist/umd/index.js",
      format: "umd",
      name: pkgName,
      globals: {
        // 配置依賴中的UMD全局變量名
        "event-message-center": "MessageCenter",
        "task-queue-lib": "TaskQueue",
      },
    },
    {
      file: "dist/bundle/index.js",
      format: "iife",
      name: pkgName,
      plugins: [terser()],
    },
  ],
  plugins: [
    typescript({
      tsconfig: "./tsconfig.json",
    }),
    alias({
      resolve: [".js"],
    }),
    resolve(),
  ],
};

在package中新建腳本命令

"rollup:build": "rm -fr dist && pnpm rollup -c"

編寫代碼

下載兩個工具依賴pnpm i ? event-message-center task-queue-lib

在index.ts中導出兩個下載的工具event-message-center，task-queue-lib

export * from "event-message-center"
export * from "task-queue-lib"
import eventMessageCenter from "event-message-center"
import taskQueueLib from "task-queue-lib"
export default {
    eventMessageCenter,
    taskQueueLib
}