Let's say I'm building a library with a few dependencies: react, moment, lodash, and uuid, and I want to distribute this in both ES and UMD format.

I'm also wary of the final bundle size of the user's application.

React should go into rollupOptions.external, since it requires a single React instance is run in the application. But what about the rest?

In my mind, the library should avoid including any external dependencies, since these risk being duplicated by the library user's application if they were to use the same dependencies.

Thus, I imagine my vite.config.js file to look like this:

const path = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
  build: {
    // Let the library user control minification in their own bundler
    minify: false,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "source/index.js"),
      name: "my-tiny-library",
      fileName: (format) => `my-tiny-library.${format}.js`,
    },
    rollupOptions: {
      // Add _all_ external dependencies here
      external: ["moment", "uuid", "lodash", "react"],
      output: {
        globals: {
          moment: "moment",
          uuid: "uuid",
          lodash: "lodash"
          react: "react"
        },
      },
    },
  },
});

package.json should contain all dependencies listed in externals as dependencies, and not devDependencies or peerDependencies.

The main con I see with this is that anybody using UMD bundles would need to include additional script tags with all dependencies from other sources, e.g: <script src=".js/2.29.1/moment.min.js"></script>, and that these would not be tree shaked, thus requiring larger bundles. That said, I think that's an okay tradeoff.

Do you agree with this approach, or do you recommend something else?

Thanks

Let's say I'm building a library with a few dependencies: react, moment, lodash, and uuid, and I want to distribute this in both ES and UMD format.

I'm also wary of the final bundle size of the user's application.

React should go into rollupOptions.external, since it requires a single React instance is run in the application. But what about the rest?

In my mind, the library should avoid including any external dependencies, since these risk being duplicated by the library user's application if they were to use the same dependencies.

Thus, I imagine my vite.config.js file to look like this:

const path = require("path");
const { defineConfig } = require("vite");

module.exports = defineConfig({
  build: {
    // Let the library user control minification in their own bundler
    minify: false,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "source/index.js"),
      name: "my-tiny-library",
      fileName: (format) => `my-tiny-library.${format}.js`,
    },
    rollupOptions: {
      // Add _all_ external dependencies here
      external: ["moment", "uuid", "lodash", "react"],
      output: {
        globals: {
          moment: "moment",
          uuid: "uuid",
          lodash: "lodash"
          react: "react"
        },
      },
    },
  },
});

package.json should contain all dependencies listed in externals as dependencies, and not devDependencies or peerDependencies.

The main con I see with this is that anybody using UMD bundles would need to include additional script tags with all dependencies from other sources, e.g: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>, and that these would not be tree shaked, thus requiring larger bundles. That said, I think that's an okay tradeoff.

Do you agree with this approach, or do you recommend something else?

Thanks

• javascript
• rollupjs
• vite

1 Answer 1

Add all external dependencies here

i do this with

import pkg from './package.json';

/** @type {import("vite").UserConfig} */
export default {
  build: {
    rollupOptions: {
      external: Object.keys(pkg.dependencies || {}),
    },
  },
};