React 和 Visual Studio 上的绝对和相对路径导入

Question

我在 VisualStudio 中使用 create-react-app 创建了一个 React 应用程序。我试图避免使用一堆../../ 来导入我的不同组件。假设我应该能够使用jsconfig.json 文件或.env 文件来设置baseUrl 或NODE_URL。但是，我显然做错了什么，因为我无法访问我的文件。我的文件结构如下所示：

+ClientApp
  package.json
  +public
  +src
    +buttons
      Button.js
    +components
      +sidebar
        Sidebar.js
        SidebarButton.js
gulpfile.js
package.json
Program.cs
Startup.cs

我想要做的是使用src/buttons/Button.js 或类似路径在我的SidebarButton.js 文件中导入Button.js 内的按钮组件。但是，我无法让环境开始从src 目录中查找文件。绝对路径将从我的 C:\ 目录开始查找，任何相对查找都将从执行导入的 js 文件的当前目录开始

Answer 1

绝对进口

您可以配置您的应用程序以支持使用绝对路径导入模块。这可以通过在项目的根目录中配置 jsconfig.json 或 tsconfig.json 文件来完成。如果您在项目中使用 TypeScript，则您已经有了一个 tsconfig.json 文件。

以下是 JavaScript 项目的示例 jsconfig.json 文件。如果文件不存在，您可以创建该文件：

{ "编译器选项": { "baseUrl": "src" }, "include": ["src"] }

如果您使用的是 TypeScript，您可以在项目的 tsconfig.json 文件的 compilerOptions 中配置 baseUrl 设置。

现在您已经将项目配置为支持绝对导入，如果您想导入位于 src/buttons/Button.js 的模块，您可以像这样导入模块：

从“按钮/按钮”导入按钮；

有关这些配置文件的更多信息，请参阅jsconfig.json 参考和tsconfig.json 参考文档。