Typescript & Gatsby：开发包无法解析路径，但 VS Code 可以答案

【问题标题】：Typescript & Gatsby: Development bundle cannot resolve paths but VS Code canTypescript & Gatsby：开发包无法解析路径，但 VS Code 可以
【发布时间】：2020-08-23 09:22:13
【问题描述】：

我有一堆像import Navi from 'components/Navi'这样的导入

这些在components/Navi 部分下方有一个红色错误行，直到我将其添加到我的tsconfig.json

"baseUrl": "./",
"paths": {
  "components/*": ["src/components/*"],
  "layouts/*": ["src/layouts/*"],
  "pages/*": ["src/pages/*"],
  "templates/*": ["src/templates/*"],
  "scss/*": ["src/scss/*"],
  "types": ["src/types"]
}

此时错误消失。当我尝试通过运行 gatsby develop 构建我的开发包时，一切看起来都很好，直到出现 ⠹ Building development bundle

紧随其后的是很多声明，例如Can't resolve 'components/Navi' in '~/src/components'

只有当我指定像import Navi from '../Navi' 这样的相对路径时，这些错误才会消失

作为旁注，我也不能用结构做import {MyType} from 'types'

src
    -> types
        -> index.ts

它在 'types' 字下出现了一个错误，其中指出 Cannot find module 'types'.ts(2307) 并且我必须将导入更改为 import {Issue} from 'types/index'

我已经尝试运行 gatsby clean 并删除 node_modules

【问题讨论】：

TypeScript 的 paths 选项用于通知 TypeChecker 加载器或捆绑器将通过指定的映射使 模块可用，它不会使这些文件可用。换句话说，它用于指定其他工具的行为。
那么我如何使这些文件可用
取决于工具，我认为 gatsby 在后台使用 Webpack。如果是这样，您需要配置 webpack 以使用类似的规则解析模块。请参阅 gatsbyjs.org/docs/add-custom-webpack-config 和 webpack.js.org/configuration/resolve。通常，您会先配置 Webpack 或任何工具，然后设置路径以匹配

标签： reactjs typescript webpack visual-studio-code gatsby

【解决方案1】：

您需要在 gatsby-config.js 中添加 gatsby-plugin-root-import 才能使用绝对导入。

Webpack 4 在其配置中提供了别名，您可以指定从特定文件夹的绝对导入。 gatsby-plugin-root-import 插件可帮助您实现该配置

首先使用安装它

npm install --save-dev gatsby-plugin-root-import

或

yarn add --dev gatsby-plugin-root-import

然后像下面这样在 gatsby-config.js 中配置它

// gatsby-config.js
const path = require('path')

module.exports = {
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        "components": path.join(__dirname, "src/components"),
        "layouts": path.join(__dirname, "src/layouts"),
        "templates": path.join(__dirname, "src/templates"),
        "scss": path.join(__dirname, "src/scss"),
        "types": path.join(__dirname, "src/types"),
        "src": path.join(__dirname, 'src'),
        "pages": path.join(__dirname, 'src/pages')
      }
    }
    ...
  ]
}

【讨论】：

它似乎适用于除接口之外的所有东西。该站点呈现正常，但import { Request } from "interfaces/requests.interface" 下有一条红线，错误Cannot find module 'interfaces/requests.interface'.ts(2307) 给出我在我的tsconfig.json 中有"paths" {..."interfaces": ["src/interfaces/*"],...} 和options: {..."interfaces": path.join(__dirname, "src/interfaces"),...}} 在我的gatsby-config.json 中gatsby-plugin-root-import 下
你确定接口在src文件夹中
同样在 tsConfig 中，需要"interfaces/*": ["src/interfaces/*"],。注意/*。也许尝试用.ts 扩展名重命名你的接口文件

【解决方案2】：

截至 2021 年 6 月，Shubham 的解决方案仍然有效 - 如果您希望它自动解析 src 下的所有目录，您可以使用我为此编写的一个小两行代码：

const fs = require("fs");
const path = require("path");

const srcDirs = fs.readdirSync(path.resolve(__dirname, "src"));

const rootDirsConfig = {};

srcDirs.forEach((srcDir) => {
    rootDirsConfig[srcDir] = path.resolve(__dirname, "src", srcDir);
});

module.exports = {
    plugins: [
          {
            resolve: "gatsby-plugin-root-import",
            options: rootDirsConfig,
          },
    ]
}

【讨论】：