如何正确导出模块，以便 vscode 可以在建议 [ctrl+space] 中显示我的模块？答案

【问题标题】：How to export module properly so vscode can show my module in suggestion [ctrl+space]?如何正确导出模块，以便 vscode 可以在建议 [ctrl+space] 中显示我的模块？
【发布时间】：2019-10-31 16:05:55
【问题描述】：

我有一个设置样式文件，例如：

GlobalStyles.js

export const GlobalStyles={
  ViewContainer:{flex:1, justifyContent:'center', alignItems:'center'},
  Center:{justifyContent:'center', alignItems:'center'},
  FontNormal:15,
  FontMedium:18,
  FontLarge:28,
  FontHeader:38
}

module.export={GlobalStyles}

当我在另一个 JS 文件中使用它时，比如说Home.js。我想知道我定义的每个Key:Value，

GlobalStyles.js vscode 中的那些导出建议像这样的导入样式：

import { GlobalStyles } from '../Component/GlobalStyles';

我的预期结果是这样的：

import { ViewContainer, Center, FontMedium, [and so on]} from '../Component/GlobalStyles';

当我输入 foo 时，如何让 vscode 建议我Auto Import foo from path/to/GlobalStyles？其中foo 类似于ViewContainer, Center, FontMedium, [and so on]。

【问题讨论】：

有什么对象与您输入的关键字foo 匹配？
@ifconfig all key:value 在 GlobalStyles 中，如 Center、FontMedium 等

标签： reactjs visual-studio-code intellisense

【解决方案1】：

您所说的功能称为Auto Imports。为了回答您的问题，此功能在 VSCode 中默认存在并有效。

这是我在 React 项目中如何使用它的示例。在这里，我在同名的文件夹中有一个组件。该文件夹之外是一个我称为 ModuleExports.js 的文件，它目前具有以下代码。

import Navbar from "./Navbar/Navbar";

export { Navbar };

作为参考，export 是 module.export 的别名，因此请随意互换使用它们。这是一个组件，所以当我尝试使用它时，您可以从屏幕截图中看到我建议使用导入。

不用组件也可以做到这一点。我将在同一个文件 ModuleExports.js 中声明一个 testObject 并将其导出。

那我们看看intellisense会不会捡起来。

就是这样。我希望这会有所帮助，并询问您是否需要更多说明或遇到问题。

【讨论】：

我应该更改我在 GlobalStyles 中的所有对象，并一一定义导出吗？还是有更简单的解决方案？在您的示例中，我希望 Name and Test 出现在 Auto Import 而不是 testObject
因此，如果您想从 GlobalStyles 访问 FontNormal，您将开始输入 GlobalStyles，您将获得自动导入建议，然后您将添加 .FontNormal 与典型对象访问一样。该对象是 GlobalStyles 并且 FontNormal 是该对象内的 Key。基本上，您不会像我的示例那样导出/导入名称和测试。您可以使用 testObject.Name 导出/导入 testObject 并访问 Name。
那么react native 如何使用import {View, Text, Stylesheets, [etc]} from 'react-native'，而View 使用括号符号？您可以使用自动导入查看所有可用组件。我认为当我需要使用括号符号导入我的key:value 时，类似import {FontNormal} from 'path/to/GlobalStyles.js' 并使用FontNormal on-the-go 而不是import GlobalStyles from 'path/to/GlobalStyles.js' 并使用GlobalStyles.FontNormal 或者可能像import GlobalStyles, {FontNormal} from 'path/to/GlobalStyles.js' 一样组合它们并有条件地使用它

【解决方案2】：

在这种情况下，错误似乎是使用动态导出。那是旧的CommonJs 风格。 VSCode 使用 typescript 工具进行静态分析。要利用这一点，您必须使用ES6 export。

CommonJs：module.export={GlobalStyles}

ES6-modules:export GlobalStyles

两者之间的显着区别在于 CommonJs 变体只是在运行时定义的变量。 IE。如果不执行代码，就无法知道您要导出的内容。 ES6 export 是保留字。它是定义后不能更改的构造，这也意味着，它的类型定义可以在不实际执行代码的情况下找到。

Typescript、Babel 等提供了两个模块系统之间的互操作性，但它们在规范上是两个非常不同的东西。

【讨论】：