ES 模塊和 jsconfig.json：錯誤 [ERR_MODULE_NOT_FOUND]

Question

我有一個使用常規 JS 的節點 Web 應用程序項目。

我正在嘗試使用jsconfig.json設置一些路徑。 我嘗試使用節點默認的Subpath imports ，即使它確實有效，vscode 智能感知也停止工作。

我發現你可以使用jsconfig.json所以我設置了這個文件

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "@controllers/*": ["node/controllers/*"],
    },
  },
  "exclude": ["node_modules"]
}

在我的package.json我添加了

"type": "module",

我的文件夾結構是

├── node
│    └──controllers
│         └── foo.js
├── server.js
├── jsconfig.json
└── package.json

但是當我嘗試從server.js導入時

import { foo } from '@controllers/foo.js'
// or import { foo } from '@controllers/foo'

foo.js

export const foo = 'Hello server'

我明白了

node:internal/process/esm_loader:74
     internalBinding('errors').triggerUncaughtException(

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@controllers/foo.js' imported from /Users/Alvaro/Sites/test/server.js

 at new NodeError (node:internal/errors:363:5)
 at packageResolve (node:internal/modules/esm/resolve:698:9)
 at moduleResolve (node:internal/modules/esm/resolve:739:18)
 at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11)
 at Loader.resolve (node:internal/modules/esm/loader:89:40)
 at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
 at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:73:40)
at link (node:internal/modules/esm/module_job:72:36) {
code: 'ERR_MODULE_NOT_FOUND'

Answer 1

經過數小時的研究，我發現在使用esm時很難擁有自定義別名路徑，並且很容易為commonjs配置，

但它可以實現，當你使用esm時，方式略有不同，我將在方法 1中編寫esm實現的解決方案，然后在方法 2中commonjs

方法一

步驟 0：

刪除jsconfig.json

步驟1：

在你的package.json添加一個exports屬性，

"name": "package-name"

"exports":{
   "./@controllers/" : "./node/controllers/"
}

注意：不要忘記@controllers和/node/controllers/后面的 '/'

第2步

你將不得不導入文件

  import {foo} from "package-name/controllers/index.js" 
/*
package-name is the same value as the 'name' property in
the package.json
*/

要了解有關package.json中的exports屬性的更多信息，請參閱此處

------------------------------XXXXXXXX------ ---------------

方法二

您不能在此方法中使用es modules

步驟 0

安裝module-alias包。

npm i module-alias

如果package.json中存在type:module ，則刪除它或將值更改為commonjs ；

步驟1

在package.json中指定為entry point的文件的起始行添加以下代碼

require(module-alias/register)

在作者的情況下檢查package.json中的main屬性，它應該是server.js 。

在package.json添加這個

"_moduleAliases": {
  "@root" : ".", // Don't forget to mnetion this
  "@controllers" : "node/controllers/*"
}

現在您可以從以下目錄中要求模塊

const {foo} = require("@controllers/foo.js") // if foo is named export 

//or

const foo = require("@controllers/foo.js");

您可以在此處參考有關module-alias更多信息

Answer 2

你所嘗試的幾乎是正確的。

你可以讓別名工作，但它必須以#開頭。

例如：在package.json

"imports": {
    "#app": "./app.js"
}

並在jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "#app": ["./app.js"]
    }
  }
}