# 使用 TS+rollup 打造一个 npm 工具库
>https://blog.csdn.net/time_____/article/details/129846790

## 环境搭建

1、参照[这篇文章](https://hunter1024.blog.csdn.net/article/details/114024145)配置npm环境，

2、参考[这篇文章](https://hunter1024.blog.csdn.net/article/details/113989728)安装TS

3、在工具库或新文件夹中使用 npm init 初始化

```sh
npm init
```

4、安装 rollup

```sh
# 全局安装
npm install --global rollup
rollup -v
```

```sh
# 本地安装
npm install --save rollup
npx rollup -v
```

```sh
npm install --save-dev path

```


```sh
npm install --save-dev rollup
npm install --save-dev @rollup/plugin-alias           # 在代码中使用别名来引用模块
npm install --save-dev @rollup/plugin-terser          # 压缩代码
npm install --save-dev @rollup/plugin-commonjs        # 压缩代码
npm install --save-dev @rollup/plugin-typescript      # 支持对TypeScript代码的打包
npm install --save-dev @rollup/plugin-node-resolve    # 解析第三方模块的依赖关系
npm install --save-dev tslib                          # 如果在tsconfig中配置了lib就需要使用tslib依赖

@rollup/plugin-json
@rollup/plugin-commonjs
@rollup/plugin-babel
```


- rollup：模块打包器
- @rollup/plugin-alias - 在代码中使用别名来引用模块
- @rollup/plugin-json - 
- @rollup/plugin-node-resolve - 解析第三方模块的依赖关系
- @rollup/plugin-terser - Terser压缩代码，减小文件大小
- @rollup/plugin-typescript - 支持对TypeScript代码的打包
- tslib：如果在tsconfig中配置了lib就需要使用tslib依赖
- typescript：使用TS语法和类型系统 tsc

## 工具配置
在根目录新建rollup.config.js配置文件，输入以下代码

```typescript
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(),
  ],
};
```

<!-- 该选项用于指定生成 bundle 的格式。可以是以下之一：

amd - 异步模块定义，适用于 RequireJS 等模块加载器
cjs - CommonJS，适用于 Node 环境和其他打包工具（别名：commonjs）
es - 将 bundle 保留为 ES 模块文件，适用于其他打包工具以及支持 <script type=module> 标签的浏览器（别名: esm，module）
iife - 自执行函数，适用于 <script> 标签。（如果你要为你的应用创建 bundle，那么你很可能用它。）
umd - 通用模块定义，生成的包同时支持 amd、cjs 和 iife 三种格式
system - SystemJS 模块加载器的原生格式（别名: systemjs） 

UMD and IIFE output formats are not supported for code-splitting builds

-->