问题 在这个javascript导入中做什么〜(代字号)?


在app.tsx中取自fountain-webapp typescript MVC样本(http://fountainjs.io/),导入包含以下行:

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

Visual Studio 2017强调了这一行(“找不到模块”),但它确实可以在浏览器中使用。我以前从未见过这种语法,也不知道它试图做什么?

这里有一张开放式机票: https://github.com/FountainJS/generator-fountain-react/issues/70


8908
2018-03-30 09:34


起源

它的 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
我理解{braces}而不是“from”〜“ - Rich
看起来这是一个Webpack的事情: stackoverflow.com/q/39535760/215552 - Heretic Monkey


答案:


这是一个打字稿文件和 import 看起来像一个 typings 生成模块IMO。

我不太熟悉打字稿但是 typings  大概 用这个 ~ (波浪号)格式,以检查特定命名空间中的模块依赖性。

根据 Blake Embrey,在 这个 关于打字github回购的帖子:

它是依赖项的命名空间。


3
2018-04-05 09:00



很好找。从阅读该线程看起来它似乎是沿着打字文件树走下去的语法。我会把赏金打开一段时间,看看是否有人咬人...... - Rich
是的,这是来自 typings。在post ts@2.0代码中你应该使用 @types/redux 而且只是做 import { IDispatch } from 'redux' - unional
虽然我找不到任何文件,但我接受这可能是正确的答案。 - Rich


蒂尔德(~)与...一起使用 的WebPack 意味着执行查找 node_modules 解决路径。

换句话说,它是预定义的 别号 解决了 node_modules

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

相当于

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

编辑:不幸的是,我不能引用任何关于此的文档,它是基于经验,欢迎您编辑这篇文章更准确的描述。

现在我注意到了 ~redux 部分也是如此,所以你可能想看一下 其他答案因为我也很困惑。


10
2018-04-05 09:06



你能引用任何关于此的文件吗? - Tamas Hegedus
是否有一个名为的模块 react-redux~redux?因为这是如何解释第二个的 ~,我也找不到在这里导出的json中的任何这样的包: github.com/FountainJS/generator-fountain-react/blob/master/... - Divyanshu Maithani
好点,我没有注意到~reduce部分。现在我也完全不解了。如果我找到更多信息,我会更新,现在我引用你的答案。 - Lyubomir
此外,我认为您需要手动添加别名以解析您的查找路径 node_modules喜欢 alias: {'~': path.resolve(__dirname)} - Divyanshu Maithani
不,在这种情况下它会开箱即用。 - Lyubomir