vite：如何處理第三方模塊中的“require”語句？

Question

我使用具有“require”語句的 UI 庫。

我可以使用 vite 成功運行開發模式。

但是當我構建和預覽 dist 時，瀏覽器失敗： Uncaught ReferenceError: require is not defined ，因為供應商塊中有一些“require”語句。

我試過@rollup/plugin-node-resolve ， @originjs/vite-plugin-commonjs但它不起作用。

我該如何解決？

Answer 1

您可以通過使用像 Webpack 或 Rollup 這樣的捆綁器來構建您的生產應用程序來修復它。 這些捆綁器可以處理“require”語句並將它們轉換為可以在瀏覽器中運行的有效 JavaScript。 在匯總配置中，您可以添加@rollup/plugin-commonjs插件來處理 require 語句。 然后，不使用 vite 來構建和預覽 dist，而是使用 rollup 和以下命令：

匯總-c

這將使用 rollup.config.js 文件中指定的配置運行匯總構建過程。

@rollup/plugin-node-resolve, @originjs/vite-plugin-commonjs 如果您使用的庫具有與 CommonJS 不兼容的依賴項，則有時無法正常工作

Answer 2

許多庫提供“運行 esmodule”方法。 或者嘗試替換 require() 來導入