How to include external dependencies in UMD bundle with rollup

Question

I'm using rollup to bundle a library and I want to include external dependencies together with my code in the UMD bundle. I can't find any useful information about this in the docs. It could be that I'm missing something obvious but it seems like the docs only demonstrates how to mark relative modules as external. I've been trying to achieve this without any success. Is it doable and if yes, how?

My code making use of an external component: src/index.ts

import { ExternalComponent } from 'external-component'

function MyComponent() {
  const externalComponent = ExternalComponent()
  // ...
}

export default MyComponent

Desired output: bundle.umd.js

function ExternalComponent() {
 // ...
}

function MyComponent() {
  const externalComponent = ExternalComponent()
  // ...
}

rollup.config.js

import babel from '@rollup/plugin-babel'
import typescript from 'rollup-plugin-typescript2'
import resolve from '@rollup/plugin-node-resolve'
import { terser } from 'rollup-plugin-terser'
import localTypescript from 'typescript'

const CONFIG_BABEL = {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  exclude: 'node_modules/**',
  babelHelpers: 'bundled',
}

const CONFIG_TYPESCRIPT = {
  tsconfig: 'tsconfig.json',
  typescript: localTypescript,
}

const kebabCaseToPascalCase = (string = '') => {
  return string.replace(/(^\w|-\w)/g, (replaceString) =>
    replaceString.replace(/-/, '').toUpperCase(),
  )
}

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: `${packageJson.name}.umd.js`,
        format: 'umd',
        strict: true,
        sourcemap: false,
        name: kebabCaseToPascalCase(packageJson.name),
        plugins: [terser()],
      }
    ],
    plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)],
  },
]

package.json

{
  "types": "index.d.ts",
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c --watch",
  },
  "devDependencies": {
    "@babel/core": "7.17.0",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-node-resolve": "13.1.3",
    "husky": "^4.3.8",
    "npm-run-all": "^4.1.5",
    "prettier": "2.5.1",
    "rollup": "^2.67.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.2",
    "typescript": "^4.5.5"
  },
}

Thanks in advance,
David

Unfortunately no @NickMcB. I haven't found any useful information on the web about how to achieve this. Upvoting this question might help if you would like to know how to achieve this with rollup too. — David, Jul 30 '22 at 19:45

score 0 · Answer 1 · answered Oct 21 '22 at 20:48

0

I find something from the rollup documentation:

If you do want to include the module in your bundle, you need to tell Rollup how to find it. In most cases, this is a question of using @rollup/plugin-node-resolve.

But the @rollup/plugin-node-resolve doc does not help.

answered Oct 21 '22 at 20:48

Yumin Gui

389
3
9

2

Thank you for looking into this. Yes I read that too but if it’s possible to achieve this with @rollup/plugin-node-resolve they should link directly to the relevant section in the plugin documentation. If the plugin documentation doesn’t show how to achieve this, the rollup documentation should either show it in their documentation or remove the part that says that this is possible to do. – David Oct 22 '22 at 08:42

How to include external dependencies in UMD bundle with rollup

1 Answers1