84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我正在開發一個 React 元件庫。該庫被多個內部 NextJs 專案使用。
出於與 NextJs 相容性的原因,該程式庫需要在某個時候轉換為 CommonJs。
問題是我的庫的一些 npm 依賴項不處理 CommonJS。例如,swiper 就是這種情況。
所以我有兩個選擇:
我還可以設想兩者的混合:我忽略管理 CommonJs 和 ES 模組的所有依賴項,並且只轉置那些必要的依賴項。
你覺得怎麼樣?
我們也有同樣的情況 - 我們有一個 Next.js 應用程序,它依賴具有潛在 ESM 模組的核心庫。不過,我建議不要捆綁您的依賴項。您的下游應用程式可能具有相同的依賴項,現在您最終將加載它們兩次。而且您可能已經在其他第 3 方依賴項(具有 ESM 依賴項)中遇到了此問題。只需將它們新增至next.config.js 中的transpilePackages 清單中即可:https://nextjs.org/docs/app/api-reference/ next-config-js/transpilePackages。我們也使用 next/jest ,它似乎也可以獲得配置並且似乎可以工作。唯一需要注意的是,我發現我們必須轉譯 @babel/runtime 但只有在 jest 運行時才可以,否則它會破壞主應用程式。
next.config.js
transpilePackages
@babel/runtime
/** @type {import('next').NextConfig} */ const nextConfig = { transpilePackages: ['@acme/ui', 'lodash-es'], } module.exports = nextConfig
我們也有同樣的情況 - 我們有一個 Next.js 應用程序,它依賴具有潛在 ESM 模組的核心庫。不過,我建議不要捆綁您的依賴項。您的下游應用程式可能具有相同的依賴項,現在您最終將加載它們兩次。而且您可能已經在其他第 3 方依賴項(具有 ESM 依賴項)中遇到了此問題。只需將它們新增至
next.config.js
中的transpilePackages
清單中即可:https://nextjs.org/docs/app/api-reference/ next-config-js/transpilePackages。我們也使用 next/jest ,它似乎也可以獲得配置並且似乎可以工作。唯一需要注意的是,我發現我們必須轉譯@babel/runtime
但只有在 jest 運行時才可以,否則它會破壞主應用程式。