这个JavaScript导入中的波浪线（~）有什么作用？

Question

从 fountain-webapp 的 TypeScript MVC 示例(http://fountainjs.io/) 中获取的 App.tsx 文件中，导入语句包含以下代码行:

import {IDispatch} from '~react-redux~redux';

Visual Studio 2017在此行下面加下划线（“无法找到模块”），但在浏览器中它确实有效。 我以前从未见过这种语法，也不知道它试图做什么？

这里有一个提到它的开放票证：https://github.com/FountainJS/generator-fountain-react/issues/70

- Rich

---

这是 es6 解构。你的包将导出一个名为 IDispatch 的函数，以及其他内容。这意味着你只需要从包中包含 IDispatch，而不需要其他任何东西。这是一个简写，相当于你写了 import Redux from '~react-redux~redux'，然后使用 IDispatch 作为 Redux.IDispatch。你可能会看到有人写 import React from 'react'，然后使用 ...extends React.Component。然而，解构 import React, { Component } from 'react' 意味着你可以使用 ...extends Component。 - Dan

我理解{花括号}的含义，但不明白“from '~”的意思。 - Rich

看起来这是一个Webpack的问题：https://dev59.com/nlkS5IYBdhLWcg3ws4nr - Heretic Monkey

Answer 1

Tilde (~) 与 webpack 结合使用，表示进行路径查找时会在 node_modules 中解析。

换句话说，它是一个预定义的别名，解析为 node_modules。

import { IDispatch } from '~react-redux~redux';

等价于

import { IDispatch } from 'relative_path_to_node_modules/react-redux~redux';

---

编辑：不幸的是，我无法引用任何有关此事的文档，这是基于经验的。欢迎您使用更准确的描述来编辑本帖。

现在我也注意到了~redux部分，因此您可能需要查看其他答案，因为我也对此感到困惑。

- Lyubomir

---

你能引用任何关于这个的文档吗？ - Tamas Hegedus

是否有一个名为react-redux~redux的模块？因为这如何解释第二个~，而且我在此处导出的json中找不到任何这样的包：https://github.com/FountainJS/generator-fountain-react/blob/master/generators/todoMVC/modules/index.js - Divyanshu Maithani

好观点，我没有注意到redux部分。现在我也完全困惑了。如果我找到更多信息，我会更新的，现在我参考你的答案。 - Lyubomir

另外，我认为您需要手动添加一个别名来解析您的查找路径到 node_modules，例如 alias: {'~': path.resolve(__dirname)}。 - Divyanshu Maithani

Answer 2

这是一个TypeScript文件，import看起来像是一个由typings生成的模块。

我对TypeScript不是很熟悉，但typings可能使用这个波浪线（~）格式来检查特定命名空间中的模块依赖关系。

根据Blake Embrey在this线程中在typings GitHub存储库上所说：

“这是依赖项的命名空间。”

- Divyanshu Maithani

---

发现不错。从阅读该线程中的内容，似乎这是一种遍历类型文件树的语法。我会将赏金保持开放一段时间，看看是否还有其他人加入... - Rich

是的，这段代码来自于 typings。在 TypeScript 2.0 之后的代码中，你应该使用 @types/redux 并且只需要执行 import { IDispatch } from 'redux'。 - unional

虽然我找不到任何关于这个的文档，但我认为这是正确答案。 - Rich