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 || {}),
    },
  },
};