umi-sourcemap-upload-plugin

A UmiJS plugin for uploading sourcemaps to Aliyun OSS and Sentry.

Features

• 🚀 Automatic sourcemap upload to Aliyun OSS
• 🔄 CDN cache refresh and preheating
• 📦 Sentry CLI integration
• 🎯 SourceMappingURL automatic update
• ⚙️ Flexible configuration options
• 🔧 TypeScript support

Installation

npm install umi-sourcemap-upload-plugin
# or
yarn add umi-sourcemap-upload-plugin
# or
pnpm add umi-sourcemap-upload-plugin

Usage

1. Install Dependencies

npm install @alicloud/cdn20180510 @sentry/cli ali-oss

2. Configure in .umirc.ts

import { defineConfig } from 'umi';
import sourceMapUploadPlugin from 'umi-sourcemap-upload-plugin';

export default defineConfig({
  // ... other config
  plugins: [
    // ... other plugins
    sourceMapUploadPlugin,
  ],
  alioss: {
    cdnDir: 'your-project/static/',
    sourceMap: {
      enabled: true,
      dir: 'your-project/sourcemaps',
      refreshCdn: false,
      preheatCdn: false,
      bucket: 'your-bucket',
      region: 'oss-cn-beijing',
      cdnOrigin: 'https://your-cdn-domain.com',
      endpoint: 'oss-accelerate.aliyuncs.com',
    },
  },
});

3. Environment Variables

# Required for Aliyun OSS
export aliyunAccessKeyId="your-access-key-id"
export aliyunAccessKeySecret="your-access-key-secret"

# Optional for Sentry
export SENTRY_AUTH_TOKEN="your-sentry-token"
export USE_SENTRY_CLI_LEGACY_FLOW="true"
export USE_SENTRY_WEBPACK_PLUGIN="true"
export RUNTIME_CDN_ORIGIN="https://your-cdn-domain.com"
export STAGE="test" # or "prod"

Configuration

SourceMapConfig

| Option | Type | Default | Description | |--------|------|---------|-------------| | enabled | boolean | false | Enable sourcemap upload | | dir | string | 'sourcemaps' | OSS storage directory | | refreshCdn | boolean | false | Refresh CDN cache after upload | | preheatCdn | boolean | false | Preheat CDN cache after upload | | bucket | string | 'web-js-map' | OSS bucket name | | region | string | 'oss-cn-beijing' | OSS region | | cdnOrigin | string | 'https://web-js-map.oss-accelerate.aliyuncs.com' | CDN domain | | endpoint | string | 'oss-accelerate.aliyuncs.com' | OSS endpoint | | accessKeyId | string | - | Aliyun access key ID (optional, uses env var) | | accessKeySecret | string | - | Aliyun access key secret (optional, uses env var) |

Workflow

1. Build Phase: UmiJS generates sourcemap files
2. Update Phase: Plugin updates sourceMappingURL in JS files
3. Upload Phase: Plugin uploads sourcemaps to Aliyun OSS
4. CDN Phase: Optional CDN cache refresh/preheating
5. Sentry Phase: Optional Sentry CLI integration

File Structure

dist/
├── static/           # Static assets
└── *.js.map         # Sourcemap files

OSS Structure:
your-bucket/
└── your-project/
    └── sourcemaps/
        └── maps/
            ├── app.js.map
            └── ...

Sentry Integration

The plugin supports Sentry CLI integration:

1. Set USE_SENTRY_CLI_LEGACY_FLOW=true
2. Provide SENTRY_AUTH_TOKEN environment variable
3. Configure .sentryclirc file

License

MIT