在“from '~/'”中，“~”（波浪线）代表当前模块所在的目录。

Question

我刚刚在一些 JavaScript 导入中看到了“~/”。

import { Foo, Bar, Baz } from "~/types/schema"

这有些令人困惑，因为“~”通常表示的是$HOME目录。但愿我能找到答案，但是我搜不到。

我发现唯一的答案是What is the ~ (tilde) doing in this javascript import?，它涉及到使用波浪线符号的import {IDispatch} from '~react-redux~redux';，但不是在路径中使用~something而是~/something。

- Greg

---

这个问题的答案对您是否有帮助？在这个JavaScript导入中，~（波浪号）是什么作用？ - LS_

谢谢您的查看，但不，它并不是这样。我之前已经看过这个答案了。我添加了一个段落来解释它与之前的不同之处。 - Greg

没问题！这个可能也相关：https://stackoverflow.com/a/58522502/3789527 - LS_

Answer 1

这可能是前端工具链的一部分，如Webpack或Vite。例如：

1. 如果您正在使用webpack，~可能会解析为node_modules。检查您的配置是否具有resolvealias特性。但要注意，它似乎可能来自其他依赖项。请参见此处的答案https://dev59.com/EFgQ5IYBdhLWcg3wOBWw#43226632以及评论中的讨论。

2. 如果您正在使用vite：它将~解析为sourceCodeDir。因此，请检查您的配置以获取sourceCodeDir值。请参见https://vite-ruby.netlify.app/guide/development.html#import-aliases-%F0%9F%91%89和https://vite-ruby.netlify.app/config/#sourcecodedir

3. 另外，Typescript具有paths功能来指定模块映射。有关详细信息，请参见此答案https://stackoverflow.com/a/58522502/3789527

- Greg

---

你的回答表明仅仅使用Webpack或Vite就会自动将~解析为项目中的某个目录，但这是不正确的。~是通过显式配置 (Webpack 的 resolve.alias 或 Vite 的 resolve.alias) 解析的。像你链接的答案所示的那样，该别名不是由Webpack预定义的。如果~没有您自己的配置也能正确解析，则很可能是技术堆栈中的其他内容（例如 Vite Ruby，正如您在您的答案中引用的那样）正在配置该别名。 - tony19

demo - Webpack 不预配置路径别名 - tony19

演示 - Vite 不会预配置路径别名。https://stackblitz.com/edit/vitejs-vite-un8kwi?file=src%2Ftypes%2Fschema.ts,src%2Fmain.ts&terminal=dev - tony19

@tony19 谢谢你的评论，你说得对！我更新了答案-请让我知道现在是否更清晰。 - Greg

@tony19 @Greg 是 sourceCodeDir 还是 resolve.alias？？ - AlxVallejo

@AlxVallejo 这取决于你使用的工具。webpack 有一个，vite 有另一个。这个答案不清楚吗？ - Greg