How Ant Design, Arco Design, and Semi Design Package Their React Component Libraries

Popular React component libraries such as Ant Design, Arco Design, and Semi Design distribute three bundles—CommonJS (lib), ES Module (es), and UMD (dist)—and the article explores how these bundles are produced.

First, a test project is created:

mkdir component-lib-test

cd component-lib-test

npm init -y

Then the three libraries are installed with pnpm:

pnpm install antd

pnpm install @douyinfe/semi-ui

pnpm install @arco-design/web-react

Using pnpm keeps the node_modules folder tidy, making it easy to inspect each library’s file layout.

Ant Design’s distribution contains lib (CommonJS), es (ES Module), and dist (UMD). The package.json declares main , module , and unpkg fields to point to these three entry points, so require loads the CommonJS version, import loads the ES Module version, and a script tag loads the UMD bundle from unpkg.

Semi Design and Arco Design follow the same pattern; the only notable difference is that Semi Design includes a separate css directory, while Ant Design uses a CSS‑in‑JS solution.

To build your own library, the typical approach is to compile ES Module and CommonJS code with tsc or Babel, and bundle the UMD version with Webpack.

Arco Design’s build logic lives in the arco‑cli arco‑scripts package. It defines a compileTS function that can invoke either tsc or Babel based on the target format, and uses Webpack (with ts-loader and babel-loader ) to produce the UMD bundle. Styles are compiled from Less, and Gulp orchestrates the tasks, allowing serial ( gulp.series ) or parallel ( gulp.parallel ) execution.

Semi Design’s scripts are located directly under its scripts folder. Its Gulp tasks compileTSXForESM and compileTSXForCJS first run tsc and then Babel to generate the ES and CommonJS bundles. Webpack handles the UMD build, and SCSS files are compiled from the semi‑foundation directory into a single stylesheet.

Ant Design separates its build tooling into the @ant-design/tools package, which also defines Gulp tasks for compiling ES and CommonJS bundles (using tsc followed by Babel) and a Webpack configuration for the UMD bundle. Its styling is delivered via a runtime CSS‑in‑JS approach, so no separate CSS compilation is needed.

Overall, all three libraries share the same three‑bundle strategy, declare the same entry points in package.json , and rely on Babel/TypeScript for ES/CJS compilation, Webpack for UMD, and Gulp for task orchestration, with only minor differences in style preprocessing (Less, SCSS, or CSS‑in‑JS).

Writing such build scripts is not difficult; by following the patterns shown you can create a comparable build pipeline for your own component library.