下一步.js。 如何從項目外的文件夾中導入模塊？

Question

我有 Next.js 應用程序，我想知道一種可能的方法來導入位於項目外部文件夾中的一些模塊。

next.js 項目文件夾

• /web/projects/nextjs-awesome-project
  

以及我想導入 next.js 項目的模塊所在的文件夾

• /網絡/實用程序/通用

為此，我在env.local文件中添加了路徑

UTILITY_LOCAL_PATH=E:/web/utilities/common

在next.config.js 中，我添加了包含規則的導入別名（將實用程序文件夾包含到包中）

const localUtilityPath = process.env.UTILITY_LOCAL_PATH;
module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // the alias
      'UTILITY_LOCAL': path.resolve(localUtilityPath),
    };

    if (localUtilityPath) {
      // The include rule
      config.module.rules[1].include.push(path.resolve(`${localUtilityPath}/common`))
    }

    return config
  },

但是 next.js 拋出一個錯誤：

Module not found: Can't resolve 'UTILITY_LOCAL/common/matrix-sublimator'
  18 |
  19 |
> 20 | import {
  21 |   matrixSublimator,
  22 | } from 'UTILITY_LOCAL/common/matrix-sublimator'

我感謝任何幫助/信息！

一點免責聲明：我知道存在正確的方法：創建一個 node_modules 依賴項並安裝它，但是我對這種特殊方式感興趣，因為我已經完成了 node_modules 依賴項，但我想快速/如何在不將整個實用程序包部署到遠程服務器的情況下進行一些快速修復，並在每次添加一些小的 console.log 等時重新安裝 node_modules 的最簡單方法。

另外，我嘗試在本地更改 node_modules 包，但它根本不起作用。 看起來 Next.js 使用了一些緩存等，因為我什至刪除了 node_modules/utilities/common 文件夾，但它以某種方式工作。 這很奇怪而且毫無意義，我不明白為什么它會以這種方式行事，這就是為什么我想到了我正在嘗試實現的“從外部文件夾導入模塊”的想法

Answer 1

我還沒有找到任何方法來導入一些位於 next.js 之外的模塊，但我找到了另一種方法來避免這種討厭的情況。

Next.js 在第一次構建時為 babel/webpack 文件等創建緩存，然后它使用這個緩存中的模塊，這就是為什么當我們在 node_modules 文件夾中進行更改時，我們在應用程序中看不到這些更改。

我找到了兩種處理方法：

1. 只需設置config.cache = false; 在 next.config.js 文件中。 它將禁用 webpack 緩存，並且在每次構建時，webpack 都會獲取 node_modules 依賴項。 缺點 - 它確實會影響性能
2. 只需刪除.next/cache甚至整個.next文件夾，對於下一次構建，Next.js 將使用來自 node_modules 的新數據重新創建此文件夾。

請注意，每次在 node_modules 包中進行一些更改時都應該這樣做（例如，在添加一些console.log等之后）

希望這些信息可以幫助某人