[note] tsup

官方網站

• tsup：使用 tsup 的說明文件
• API Docs：列出所有 options 能用的參數（有些沒有寫在說明文件中）

Snippets

使用 tsup 打包 React Components 專案

• 如果沒有把 react 和 react-dom 放在 external 中，很有可能會看到這個錯誤：「Uncaught Error: Dynamic require of "react" is not supported」

import fs from 'node:fs';
import path from 'node:path';

import cpy from 'cpy';
import { defineConfig } from 'tsup';

export default defineConfig({
  // 會根據給的 entry 不同而把產出的檔案放在不同資料夾內，好處是能使用 glob
  // entry: ['src/lib/index.ts', 'src/lib/**/index.ts'],
  // 如果希望比較精確定義產出的檔案的名稱和資料夾，需要使用 object 來定義
  entry: {
    index: 'src/lib/index.ts',
    'tailwind.config': 'tailwind.config.ts',
    ...getComponentPaths(),
  },
  treeshake: true,
  minify: true,
  splitting: false,
  target: 'es2019',

  // 不知道為什麼 build 出來的檔案超級大，文件是寫說不能和 dts 同時使用
  sourcemap: false,

  // 輸出到那個資料夾，預設是 dist
  // outDir: 'dist',

  // 文件說會在 build 之前 clean output 資料夾
  // 但不知道為什麼有時候並沒有清掉 dist，所以我還是用 rmrf 先把 dist 清掉
  clean: true,

  // 這是為了產生型別定義檔
  dts: true,

  // 會根據 pacakge.json 中 type 設定的是 commonjs 或 module
  // 而產生不同的 .mjs, .cjs, .js
  format: ['cjs', 'esm'],

  // 把 react 和 react-dom 設定成 external 是很重要的
  external: ['react', 'react-dom'],

  // onSucess callback 並不會等所有的檔案都 build 完才執行
  async onSuccess() {
    await cpy('src/**/*.css', `dist`);
  },
});

function getComponentPaths() {
  const files = fs.readdirSync('src/lib');

  return (
    files.reduce < Record < string,
    string >>
      ((acc, file) => {
        const filePath = path.join('src/lib', file);

        if (fs.statSync(filePath).isDirectory()) {
          acc[`lib/${file}/index`] = `${filePath}/index.ts`;
        }

        return acc;
      },
      {})
  );
}

Giscus