On this page

## Build Artifacts and Framework Integration

This article explains the build artifacts shipped by the TRRO Web SDK and what to watch out for when consuming them in different front-end frameworks.

## Build artifact directory structure

After building, the SDK emits the following structure under `dist/trro-sdk/<version>/`:

    dist/trro-sdk/<version>/
    ├── index.js                          # UMD artifact, bundles all runtime dependencies, works out of the box
    ├── index.esm.js                      # ESM artifact, native ES Module for modern bundlers with on-demand tree-shaking
    ├── index.d.ts                        # TypeScript type declarations (Chinese)
    ├── index_en.d.ts                     # TypeScript type declarations (English)
    ├── index.js.LICENSE.txt              # Third-party dependency license notes for the UMD artifact
    ├── index.esm.js.LICENSE.txt          # Third-party dependency license notes for the ESM artifact
    ├── demo_public_cloud.html            # Public-cloud integration Demo
    ├── demo_public_cloud_intl.html       # Public-cloud international-site Demo
    ├── demo_public_cloud_intl_en.html    # Public-cloud international-site English Demo
    ├── demo_private_cloud.html           # Private-cloud integration Demo
    ├── demo_js/                          # Scripts used by the Demos
    │   ├── demo.js                       # Main module of the demos
    │   ├── i18n.js                       # Internationalization module of the demos
    │   ├── jquery-3.7.1.min.js           # Demo dependency: jquery
    │   └── tailwindcss.js                # Demo dependency: tailwindcss
    ├── docs/                             # SDK API docs (Chinese), generated by JSDoc
    └── docs_en/                          # SDK API docs (English), generated by JSDoc

Of these, `index.js` and `index.esm.js` are the two core artifacts in different module formats:

File | Format | Description
--- | --- | ---
`index.js` | UMD | Universal module format, loadable via `<script>` tag, `CommonJS`, `AMD`, etc.
`index.esm.js` | ESM | Native ES Module for modern bundlers (Vite, Rollup, Webpack 5) with on-demand tree-shaking

`index.js` is a UMD artifact that already bundles all runtime dependencies, so it works out of the box.

## Consuming in frameworks like React / Vue

Modern frameworks (React, Vue, etc.) are typically built on bundlers such as Webpack or Vite, which by default re-transpile dependencies found in `node_modules`.

`index.js` (the UMD artifact) is an already-minified, fully bundled product. If it is compiled again by the framework's Babel / SWC pipeline, unintended side effects may occur (e.g. the obfuscated code behaving incorrectly after a second transform, or bloated bundle size).

We recommend one of the following two approaches:

### Option 1: Configure Babel to ignore the SDK (keep using the UMD artifact)

Make sure the bundler does not re-transpile the SDK. When using Webpack's `babel-loader`, exclude it via `exclude` on the rule:

    // webpack.config.js
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules[\\/]trro_web_sdk/,
          use: 'babel-loader',
        },
      ],
    }

If you use a Babel config file, skip the SDK via `ignore`:

    // babel.config.json
    {
      "presets": ["@babel/preset-env"],
      "ignore": ["node_modules/trro_web_sdk"]
    }

> As long as the bundler skips transpiling the SDK files, the UMD artifact is safe to use.

### Option 2: Use the ESM artifact directly

If your build chain supports native ESM (Vite, Rollup, or Webpack 5 `outputModule`), reference `index.esm.js` directly:

    import { TRROSDK } from 'trro_web_sdk/dist/trro-sdk/<version>/index.esm.js';

The ESM artifact also bundles its dependencies and is correctly recognized as a module by bundlers (enabling tree-shaking), so no Babel-ignore configuration is needed.

Type anything to view search result