tsup: 打包工具以及遇到的坑

一个号称很快的打包工具
更新于: 2024-08-10 11:06:44

安装

yarn add tsup --dev

为什么考虑弃用

目前可以考虑使用较为成熟的 rollup，毕竟 vite 也会在生产环境使用这个。

理由详情
iife无法完美替换 umd(有解决方案)
// 后面代个 default，让人无法理解
const full = fullscreen.default;
// 可以用这个方案
https://github.com/egoist/tsup/issues/924
es5 要额外安装 swc 模块
我希望一个打包工具，可以解决所有的问题，我围绕他建立生态即可
external 默认处理情况
By default tsup bundles all import-ed modules but dependencies and peerDependencies in your package.json are always excluded, you can also use --external <module|pkgJson> flag to mark other packages or other special package.json's dependencies and peerDependencies as external.

踩坑

  • 这个坑影响到了 tsup，但实际这个是 esbuild 的一个BUG

在使用 tsup 的时候，如果没有加 splitting:true 这个参数，默认导出的 export 里，会带一个.default，无法直接使用。

有些情况，如 vite-pluigin 我们导出的就是一个纯函数，遇到这个参数就很讨厌

我的解决过程，参数这里: https://github.com/afeiship/vite-packages/commit/c1ff1206403a5cbaecf8ac8bb34089f3157666f3

const abc =  () => {
  console.log("hello");
};

// for commonjs es5 require
// if (typeof module !== 'undefined' && module.exports) {
//   module.exports = abc;
// }

export default abc;
import { defineConfig } from 'tsup';

export default defineConfig({
  splitting: true,
  cjsInterop: true,
  entry: ['src/*.ts'],
  format: ['cjs', 'esm' /*'iife' */],
  external: ['clipboardy'],
  dts: true,
  clean: true,
  sourcemap: true,
  outExtension({ format }) {
    return {
      js: `.${format}.js`,
    };
  },
});

iife 与浏览器

用 tsup 打包出来的会带 __esModule: true, 并且有 default，不能直接在 globalVar 里访问到，而是 globalVar.default 才可以。

所以目前推荐这种形式导出: export { getLanguage, stdLanguage };

这个问题见这个包 : https://github.com/afeiship/fullscreen

关于最终 exports

  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  }

生成 d.ts 存在问题

后面找到原因是因为 type.d.ts 中有部分错误

参考