tsup: 打包工具以及遇到的坑
一个号称很快的打包工具
安装
yarn add tsup --dev
踩坑
- 这个坑影响到了 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;
- https://github.com/getoslash/eslint-plugin-tap/blob/main/tsup.config.ts
- https://github.com/evanw/esbuild/issues/3281
- (有坑的代码): https://github.com/psirenny/tsup-cjs-default-export
- https://github.com/u3u/fix-tsup-cjs
- https://github.com/egoist/tsup/issues/572
- https://github.com/egoist/tsup/issues/710
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`,
};
},
});
参考
- https://github.com/egoist/tsup
- https://tsup.egoist.dev/
- https://github.com/forsigner/fomir
- https://github.com/forsigner/fomir/blob/master/packages/fomir/package.json
- https://github.com/egoist/tsup/issues/897
- https://javascript.plainenglish.io/how-to-create-a-typescript-npm-library-for-dummies-6633f2506a17
- https://github.com/AkashRajpurohit/ts-npm-template
- https://akashrajpurohit.com/blog/building-and-publishing-typescript-npm-packages-a-stepbystep-guide/
- https://www.skovy.dev/blog/build-component-libraries-with-tsup-tailwind?seed=nwvifb