为什么在 VSCode 中“import {} from ../entities”有效，而不是“import {} from src/entities”？

Question

这可能是一个非常基本的问题，但我正在关注一个 React 教程，我的文件结构如下：

在我的user.ts 文件中，我尝试从types.ts 导入用户实体和上下文，Intellisense 自动完成导入语句到

import { User } from 'src/entities/User';
import { MyContext } from 'src/types';

但是，当我使用yarn nodemon dist/index.js 运行程序时，我得到的错误是：

    Error: Cannot find module 'src/entities/User'
Require stack:
- /Users/jaidynbelbin/Desktop/React Projects/LIReddit-Server/dist/resolvers/user.js
- /Users/jaidynbelbin/Desktop/React Projects/LIReddit-Server/dist/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/jaidynbelbin/Desktop/React Projects/LIReddit-Server/dist/resolvers/user.js:28:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/jaidynbelbin/Desktop/React Projects/LIReddit-Server/dist/resolvers/user.js',
    '/Users/jaidynbelbin/Desktop/React Projects/LIReddit-Server/dist/index.js'
  ]
}

通过将导入语句更改为：

import { User } from '../entities/User';
import { MyContext } from '../types';

我的问题是为什么？是否与我的package.json 文件中的"watch": "tsc -w", 命令有关？

抱歉，之前有人问过这个问题。

提前致谢！

Answer 1

编译器尝试在相对路径中查找模块，所以：

在你的 tsconfig. tsconfig设置使用baseUrl设置，这样可以解决问题：

"CompilerOptions": {
    “baseUrl”: “./src”,
}

设置 baseUrl 会通知编译器在哪里可以找到模块。所有具有非相对名称的模块导入都被假定为相对于 baseUrl

这是来自 typescript 的文档： https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url

Answer 2

import { User } from 'src/entities/User';
import { MyContext } from 'src/types';

user.ts 中的那些行将尝试导入相对于user.ts 所在目录的模块，该目录是resolver。就像你输入的那样：

import { User } from './src/entities/User';
import { MyContext } from './src/types';

这里.表示当前工作目录resolver所以路径变成：

resolver/src/entities/User 你没有。

MyContext 也是如此，路径变为resolver/src/entities/MyContext。

但是通过使用相对路径 typescript 能够正确解析这些模块的路径。

Answer 3

好的，你这里有很多问题，我会尽量一一回复:)。

• 您正在尝试从构建文件运行应用程序，即yarn nodemon dist/index.js 通常使用 dist 文件夹来保存构建文件，而 src 是实际开发发生的地方。

• 您的问题已解决，因为您已将路径从绝对路径更改为相对路径。之前不能使用绝对路径的原因是你的 webpack 配置，如果你想使用绝对路径，你需要更新 webpack.json 文件。

• 有两种方法，一种是直接解析源到src文件夹。

var path = require('path');

// ...
resolve: {
  root: [
    path.resolve('./src'),
  ],
}

现在可以直接导入为import { User } from 'entities/User'

• 另一种方法是设置别名。你也可以为子文件夹设置一个别名，这将有助于处理 monorepo 或大型 repo 甚至是小的 repo :)

resolve: {
  alias: {
    entities: path.resolve('./src/entities')
  }
},

现在您可以从 import { User } from 'entities/User' 这样的实体导入。

由于您使用的是 typescript 编译器 tsc -w，因此您可以更新您的 tsconfig.json 文件以实现相同的目的。

compilerOptions: {
  // ...

  "baseUrl": "./src",
  "paths": {
    "entities/*": [
      "entities/*"
    ],
  }
}