如何打包类库

类库打包
- 示例仓库

一个工具库得明确 bundle 文件的运行环境是Web，还是Node，还是双环境。Web 与 Node 的部分代码无法打包在一起，具体原因如下。

Web 独有window全局变量，Node 独有global全局变量
Web 独有BOM/DOM等对象，Node 独有Fs/Path等模块
Web 可兼容IIFE与AMD，Node 可兼容CJS，两者都兼容CMD、UMD和ESM

bundle 文件最终的模块规范确定为CJS、ESM和UMD。

为了更好地拥有该模糊提示功能，推荐使用typescript编写工具库，在打包代码时顺便生成d.ts声明文件。

目录结构

以 Web 工具为例：

txt

project
├─ dist          # 输出目录
│  ├─ index.js
│  ├─ index.esm.js
│  ├─ index.umd.js
│  ├─ index.d.ts
├─ src           # 源码目录
│  ├─ index.ts # 源码
│  ├─ index.umd.ts
├─ .gitignore
├─ .npmignore
└─ package.json

.npmignore和.gitignore

text

.DS_Store
node_modules
package-lock.json
yarn.lock

打包工具 - rollup

rollup配置简单，内置 ES6 解析、摇树优化、作用提升。
@rollup/plugin-typescript 编译 ts
@rollup/plugin-node-resolve自动寻找引用到的 Npm 模块 @rollup/plugin-commonjs将 CJS 转换为 ESM 再让其参与到后续编译中
rollup-plugin-dts合并声明文件
rollup-plugin-cleandir清理 dist 文件夹
rollup-plugin-terser压缩

import TypescriptPlugin from "@rollup/plugin-typescript";
import CommonjsPlugin from "@rollup/plugin-commonjs";
import NodeResolvePlugin from "@rollup/plugin-node-resolve";
import DtsPlugin from "rollup-plugin-dts";
import { cleandir as CleandirPlugin } from "rollup-plugin-cleandir";
import { terser as TerserPlugin } from "rollup-plugin-terser";
const PLUGINS = [
  TypescriptPlugin(),
  CommonjsPlugin(),
  NodeResolvePlugin(),
  TerserPlugin({
    compress: { drop_console: false },
    format: { comments: false },
  }),
];
export default [
  {
    input: "src/index.ts",
    output: {
      file: "dist/index.js",
      format: "cjs",
    },
    plugins: [...PLUGINS, CleandirPlugin("dist")],
  },
  {
    input: "src/index.ts",
    output: {
      file: "dist/index.esm.js",
      format: "esm",
    },
    plugins: PLUGINS,
  },
  {
    input: "src/index.ts",
    output: { file: "dist/index.d.ts", format: "esm" },
    plugins: [DtsPlugin()],
  },
  // {
  // 	input: "src/index.umd.ts",
  // 	output: {
  // 		file: "dist/index.umd.js",
  // 		format: "umd",
  // 		name: "pakname",
  // 	},
  // },
];

如何打包类库 ​

目录结构 ​

打包工具 - rollup ​

如何打包类库

目录结构

打包工具 - rollup