在不使用 Babel/Webpack 的情況下在 NodeJS 中導入具有絕對路徑的 ES6 模塊

Question

我有一個普通的舊 NodeJS 項目（使用 Typescript），我真的很難找到如何為本地文件執行 ES6 導入，而不必一直執行“../../../foo/bar”。

有很多類似的問題，但似乎都圍繞着我沒有使用的 babel/Webpack。

如果我執行以下操作：

import foo from `/bar`

它在我的 PC 的根文件夾中查找它（例如 c:/bar）並失敗。

我嘗試使用將 NODE_PATH 設置為各種鉸鏈（“/”、“.”等）的 .env 文件，但沒有運氣。 我還嘗試在我的 package.json 和我的 tsconfig.json 文件中設置“類型：‘模塊’”{“baseUrl”：“。”}

所以我想我已經嘗試了我能找到的每一個答案。 我只是以錯誤的組合來做它們還是解決方案有所不同？

Answer 1

這是我使用的兩個技巧，Node.js 和原生 ES 模塊。

1. file:依賴項

如果您想從子 package 訪問<project root>/bar兩個級別，請將其添加到package.json依賴項中：

    "@local/bar": "file:../../bar",

..使上述子包可以使用bar作為@local/bar 。

雖然相對路徑仍然存在，但它們現在都在package.json文件中，並且源永遠不需要知道。

2. 使用動態import()

選擇一個常量的根文件夾路徑並執行以下操作：

const foo = await import(`${rootPath}/bar`);

Answer 2

這對我來說很容易實現，在 VSCode 中使用 Typescript。

在tsconfig.json中，我在compilerOptions下添加了"baseUrl": "./",

重新啟動 VSCode 后，VSCode 將使用偽絕對路徑自動導入。

路徑不會以/開頭，它仍然指向您的驅動器根目錄。

如果 低於當前文件，它仍將使用./relative/path ，但不再使用../../tree/traversing

然后我將 packages.json 中的 dev 設置為

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "cross-env NODE_PATH=./ nodemon ./app.ts"
},

我使用cross-env 。 您可以使用set命令和nodemon來自動重新加載更改文件。

將NODE_PATH設置為./告訴 NodeJS 執行 Visual Studio 和 TypeScript 正在執行的操作。

我的src目錄中有package.json 。 您可能不會，並且可能需要更改一些路徑來調整。

Answer 3

我不確定您所說的“無需執行本地文件"../../../foo/bar" ”是什么意思

讓我解釋一下 Javascript 如何處理導入。 這是一個基本的文件夾結構。

C:Users/NAME/Project/randomfolder/bar.js


- Project
  - Random Folder
    - foo.js
  - bar.js

選項 1對於您將要做的 95% 的事情來說，這可能是更好的選擇

假設您正在嘗試將 foo.js 導入 bar.js，我們首先使用. 所以它會是

import foo from "./Random Folder/foo.js"

如果你要走另一條路. 仍然習慣於說獲取文件夾結構中的當前位置，但您過了一秒鍾. 所以..然后一個/到 go 一個文件夾。 因此，要將 bar.js 導入 foo.js，它看起來像這樣：

import bar from "../bar.js"

我們正在上一個文件夾，然后尋找我們想要的文件。

選項 2

但是，如果您知道您的文件夾結構將非常大，並且您將始終向上或向下導入幾個文件夾，為什么不創建一個變量然后使用字符串文字。

  let folder = `../../../`
  import test from `${folder}foo`

你有幾個選擇來處理你想做的事情。

對於 NodeJS 和模塊的選項 3

如果您使用的是 NodeJS 並且想要獲取非相對路徑，請使用app-root-path模塊。 它使您始終可以獲取項目根目錄，然后相應地深入研究文件。 這可以通過字符串文字來完成。

var appRoot = require('app-root-path');
import foo from appRoot + "/foo/bar/folders/bla/bla"

or

import foo from `${appRoot}/foo/bar/folders/bla/bla` <-- string literals