为什么 VS Code 认为导入有效，而 WebPack 不认为? [英] Why does VS Code consider an import valid but WebPack does not?

问题描述

我很确定这完全与我使用的 WebPack 版本有关 ("webpack-cli":"3.3.11") 但我想在去之前确定我是对的在升级 WebPack 的另一次调试之旅中(我尝试将其升级到 5，但没有配置文件就无法运行，我只是针对阅读手册说明扩大了限制).

I am pretty sure it is all about the version of WebPack I use ("webpack-cli": "3.3.11") but I want to be sure I am right before going on another journey of debugging for upgrading WebPack (I tried to upgrade it to 5 but it does not work without a config file, I am just stretching the limit against the read-the-manual instruction).

在 tsconfig.base.js 我有这个:

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

(使用单独的 tsconfig.base.json 的原因在我下面链接的问题中.)

(The reason for using a separate tsconfig.base.json is in the question I linked to below.)

然后是这个:

import { RegistrationStepManager } from "@/helpers";

在文件./src/some/path/RegistrationStepper.tsx中.

使用 CRA 和 react-scripts v4.0.3 运行 npm start 显示错误而不会崩溃:

Running npm start with CRA and react-scripts v4.0.3 shows an error without crashing:

Failed to compile.

./src/some/path/RegistrationStepper.tsx
Module not found: Can't resolve '@/helpers' in '/my-path/my-project/src/some/other/path'.

VS Code 工具提示和自动完成显示所有内容都导入良好，没有红色波浪线，只有一些可忽略的警告.

VS Code tooltips and autocompletion show everything is imported well, no red squiggles, just some ignoreable warnings.

我认为 "@/*" 的别名效果不佳，但是，由于 VS Code 与它配合得很好，我认为这可能是一个错误.

I think that the alias for "@/*" is not working well but, because VS Code works well with it, I think it might be a bug.

遇到此故障时，TS 如何与 WebPack 配合使用?我是否必须升级到 WebPack 5?

How does TS work with WebPack when it comes to this failure? Do I have to upgrade to WebPack 5?

同一天的另一个问题，来自我，在相同的代码上，也许这里也有相关性:如何导入通过中间 TS 文件枚举?.

Another question from the same day, from me, on the same code, maybe it is relevant here too: How can I import an enum through an intermediate TS file?.

谢谢.

我阅读了这篇，我将在没有 CRA 的情况下从 CRA 迁移到 WebPack，因为我正在从事的项目是不只是为了玩.如果可以，请给我推荐一份从 CRA 迁移到 WebPack 的指南.我认为这个问题开头的问题是关于一些缺少的 WebPack 配置.我已经有一个旧的 WebPack 配置文件，它可能会导致部分问题.

I read this and I am going to migrate from CRA to WebPack without CRA since the project I am working on is not just for playing. Please, if you can, suggest me a guide to migrate from CRA to WebPack. I think the issue at the start of this question is about some missing WebPack configuration. I already have an old WebPack config file that might be causing a part of the issue.

推荐答案

我有一个未实际使用的 WebPack 配置文件.我实际上是在使用 CRA.所以我开始使用 react-app-rewired 和 WebPack v4 作为中间解决方案，直到我开始使用纯"网络包.在 config-overrides.js 我放了:

I was having a WebPack config file that was not actually used. I was actually using CRA. So I started using react-app-rewired and WebPack v4 as an intermediate solution till I start using "pure" WebPack. In config-overrides.js I put:

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
  webpack: function(config, env) {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        plugins: [
          ...config.resolve.plugins,
          new TsconfigPathsPlugin({
            extensions: [".js", ".jsx", ".ts", ".tsx"],
          }),
        ],
      },
    };
  },
};

迁移到 react-app-rewired 并进行此更改后，无法编译.错误消失了.这也解决了如何通过中间 TS 文件导入枚举?中的问题.

After migrating to react-app-rewired and making this change, the Failed to compile. error is gone. This also solves the issue in How can I import an enum through an intermediate TS file?.

这篇关于为什么 VS Code 认为导入有效，而 WebPack 不认为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！