Bundle multiple named AMD modules with dependencies into one JS file (building a web app extension system)

I'm working on an extension system for my web app. Third-party developers should be able to extend the app by providing named AMD modules exporting constants and functions following a predefined spec and bundled into a single .js JavaScript file.

Example JavaScript bundle:

define('module1', ['exports', 'module3'], (function (exports, module3) {
  exports.spec = 'http://example.com/spec/extension/v1'
  exports.onRequest = function (request) { return module3.respond('Hello, World.') }
}));
define('module2', ['exports', 'module3'], (function (exports, module3) {
  exports.spec = 'http://example.com/spec/extension/v1'
  exports.onRequest = function (request) { return module3.respond('Foo. Bar.') }
}));
define('module3', ['exports'], (function (exports) {
  exports.respond = function (message) { return { type: 'message', message: message } }
}));

In the above example module1 and module2 are extension modules (identified by the spec export) and module3 is a shared dependency (e.g. coming from an NPM package). Extension bundles will be loaded in a worker within a sandboxed iframe to seal of the untrusted code in the browser.

Example TypeScript source:

// module1.ts
import respond from 'module3'
export const spec = 'http://example.com/spec/extension/v1'
export const onRequest = (request: Request): Response => respond('Hello, World.')

// module2.ts
import respond from 'module3'
export const spec = 'http://example.com/spec/extension/v1'
export const onRequest = (request: Request): Response => respond('Foo. Bar.')

// module3.ts
import dep from 'some-npm-package'
export respond = (message: string) => dep.createMessageObject(message)

Here is my list of requirements to bundling:

• All necessary dependencies (e.g. shared module, NPM package logic) must be included in the bundle
• The source code needs to be transpiled to browser compatible code if necessary
• The AMD format is required by the custom extension loader implementation
• The AMD modules must not be anonymous as the module file names are lost while bundling
• No relative paths must be used among dependencies (e.g. ./path/to/module3 instead of module3)
• The result should be one JavaScript bundle, thus ONE JavaScript file and ONE sourcemaps file

What's the easiest way to do this?

This is the closest solution I found using rollup and the following rollup.config.js:

import { nodeResolve } from '@rollup/plugin-node-resolve'
import { terser } from 'rollup-plugin-terser'
import typescript from '@rollup/plugin-typescript'

export default {
  input: [
    'src/module1.ts',
    'src/module2.ts'
  ],
  output: {
    dir: 'dist',
    format: 'amd',
    sourcemap: true,
    amd: {
      autoId: true
    }
  },
  plugins: [
    typescript(),
    nodeResolve(),
    terser()
  ]
}

From this I get the desired named AMD modules (one for each entry point and chunk) in separate .js files. Problems:

• Some dependencies are referenced by ./module3 while being named module3.
• The modules appear in separate JavaScript and Sourcemap files instead of being concatenated into a single bundle.

Questions:

• Is there an easy fix to the above rollup.config.js config to solve the problem?

  I tried to write a small rollup plugin but I failed to get the final AMD module code within it to concatenate it to a bundle. Only the transpiled code is available to me. In addition I don't know how to handle sourcemaps during concatenation.

• Is there an alternative to rollup better suited to this bundling scenario?

• The big picture: Am I completely on the wrong track when it comes to building an extension system? Is AMD the wrong choice?

from Bundle multiple named AMD modules with dependencies into one JS file (building a web app extension system)