vitejs 中的库模式：我应该如何管理外部依赖？

Question

假设我正在构建一个具有一些依赖项的库：react、moment、lodash 和 uuid，我想以 ES 和 UMD 格式分发它。

我还对用户应用程序的最终包大小保持警惕。

React 应该将 go 放入rollupOptions.external中，因为它需要在应用程序中运行单个 React 实例。 但是 rest 呢？

在我看来，库应该避免包含任何外部依赖项，因为如果库用户的应用程序使用相同的依赖项，它们就有被复制的风险。

因此，我想象我的vite.config.js文件看起来像这样：

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 应该包含在 externals 中列为dependencies的所有依赖项，而不是devDependencies或peerDependencies 。

我看到的主要缺点是任何使用 UMD 捆绑包的人都需要包含其他脚本标签以及来自其他来源的所有依赖项，例如： <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> ，并且这些不会被摇树，因此需要更大的包。 也就是说，我认为这是一个不错的权衡。

您同意这种方法，还是推荐其他方法？

谢谢

Answer 1

在此处添加所有外部依赖项

我这样做

import pkg from './package.json';

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