如何用tsup等现代打包工具将TypeScript React库打包为UMD格式？

以下是具体实现步骤：

1. 安装依赖 #

确保项目已初始化，然后安装核心依赖和开发工具：

npm init -y
npm install react react-dom react-shimmer
npm install -D tsup typescript @types/react @types/react-dom

2. 配置TypeScript #

创建tsconfig.json文件，配置React和TypeScript编译规则：

{
  "compilerOptions": {
    "jsx": "react",
    "module": "ESNext",
    "target": "ES2015",
    "strict": true,
    "esModuleInterop": true
  }
}

3. 配置tsup打包规则 #

创建tsup.config.ts文件，指定UMD格式、入口文件和打包参数：

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.tsx'],
  format: ['umd'], // 指定输出UMD格式
  outDir: 'dist', // 打包产物输出目录
  platform: 'browser', // 目标运行平台为浏览器
  bundle: true, // 开启代码合并打包
  minify: false, // 开发阶段可关闭压缩，生产环境可开启
  // 若希望外部引入React/ReactDOM，改为external: ['react', 'react-dom']；否则保留空数组将其打包进产物
  external: []
});

4. 调整组件代码，暴露全局render方法 #

修改src/index.tsx，将render函数挂载到浏览器全局对象，方便HTML直接调用：

import React from 'react';
import ReactDOM from 'react-dom';
import { Image, Shimmer } from 'react-shimmer';

function App() {
  return (
    <div>
      <Image
        src="https://source.unsplash.com/random/800x600"
        fallback={<Shimmer width={800} height={600} />}
      />
    </div>
  );
}

const render = (id: string) => {
  const root = document.getElementById(id);
  if (!root) return;
  ReactDOM.render(<App />, root);
};

// 声明全局类型，避免TypeScript报错
declare global {
  interface Window {
    render: (id: string) => void;
  }
}

// 将render挂载到window全局对象
window.render = render;

export default render;

5. 执行打包并测试 #

在package.json中添加打包脚本：

"scripts": {
  "build": "tsup"
}

运行打包命令：

npm run build

打包完成后，dist目录下会生成UMD格式的产物index.umd.js。按照你的示例创建HTML文件测试：

<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <!-- 若配置了external: ['react', 'react-dom']，需先引入React的UMD包 -->
    <!-- <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->
    <script type="text/javascript" src="./dist/index.umd.js"></script>
    <script>
        render('app');
    </script>
  </body>
</html>

直接在浏览器中打开该HTML文件，即可看到组件正常渲染。

内容的提问来源于stack exchange，提问作者user3898892