使用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