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:

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.