Typescript IDE自动从dist而不是src导入

Posted 2023-02-16

【中文标题】Typescript IDE自动从dist而不是src导入

【英文标题】：Typescript IDE Auto imports from dist not src

【发布时间】：2021-01-10 07:53:45

【问题描述】：

我目前正在开发一个 Typescript Monorepo 项目。

文件夹结构如下所示：

Clients
├- tsconfig.json
└- Packages
   ├- Core
   | ├- tsconfig.json
   | ├-┬ src
   | | └- MyModule.ts
   | └-┬ dist
   |   ├- MyModule.js
   |   └- MyModule.d.ts
   └┬ Web
    ├- tsconfig.json
    └-┬ src
      └- WebComponent.tsx

core/src 包含我的模块，core/dist 包含我的构建。 当我在web/src/WebComponent.tsx 上自动导入一个模块时，它会自动导入为@myApp/dist/MyModule 而不是@myApp/src/MyModule。

这是我的 TSConfig 路径的样子（在根文件夹中）：

"baseUrl": "./",
"paths": 
    "@myApp/core/src/*": ["./packages/core/src/*"],
 

我也试过这个：

"baseUrl": "./",
"paths": 
    "@myApp/core/*": ["./packages/core/*"],

这似乎不是 IDE 问题，因为我们的团队中有人员同时使用 VSCode 和 Webstorm，两组用户都遇到了这个错误。

编辑： 如果您也遇到此问题，我已经写了temporary fix，但我们将不胜感激！

【问题讨论】：

我对 Webstorm 也有同样的问题，感觉可能是 Typescript 问题？我会开始赏金，因为它变得非常烦人。

【参考方案1】：

我不确定这是否能完全解决您的问题，但我还是将其留在这里。我只能在 Webstorm 上重现该问题，而不能在 Visual Studio Code 上重现。如果这不能解决您的问题，请发表评论，我会进一步调查。

TypeScript 配置：tsconfig.json

您可以尝试修改您的tsconfig.jsons 以使用exclude 标志（与include 相同的JSON 级别）显式排除dist 文件夹，记录在TypeScript's TSConfig Reference documentation 下。

添加以下配置条目

   "exclude": ["dist/**/*"]

应该表明不应从 IDE 中导入目录。然而，这 似乎适用于 Visual Studio Code，但不受 Webstorm 的尊重（在下一节中讨论）。我不是 100% 确定为什么 Visual Studio Code 决定尝试导入includes 中提到的文件之外的文件。如果这在 Visual Studio Code 上不适合您，我将需要更多详细信息来进行复制。

WebStorm（或任何其他 JetBrains IDE）

有两种解决方案：

项目特定：在任何 JetBrains IDE 上，您可以通过打开上下文菜单（默认情况下右键单击）并单击 Mark Directory as | Excluded 将目录标记为“已排除”（例如 dist 目录）。 全局：在File | Settings | Editor | File Types 下，您可以在Ignore Files and Folders 下为dist 添加另一个条目。

注意：这将阻止 IDE 显示排除目录（例如 dist）中的任何“源”作为建议。如果标识符是明确的，它将正确导入它而无需进一步提示。

不幸的是，这似乎需要开发人员在初始化项目后进行手动交互 - 我无法找到您是否可以在 VCS 存储库中指定排除规则并在 IDE 中初始化项目时自动应用设置。

【讨论】：

刚刚尝试了这两种解决方案，但似乎都不起作用......我确实觉得很奇怪，尽管在 tsconfig 中编辑路径名似乎并没有改变导入弹出窗口中的路径名。我对此有 0 个想法。不过感谢您的想法！

@pfych 你是否可以给我足够的细节来在任一 IDE 中创建一个最小的复制品？ VS 版本，任何插件，示例 repo？我大量使用 WebStorm，并且在 dist 文件夹上使用排除项时从未遇到过问题，但我没有使用足够多的 Visual Studio Code 来体验交互。

【参考方案2】：

我们最终提出的解决方案也是编写一个 ESLint 规则，该规则突出显示 dist 导入并在 eslint --fix 命令上将其替换为 src。

这就是我们所做的

结构：

Clients
├- tsconfig.json
├- .eslintrc.js (UPDATED!)
├- package.json (UPDATED!)
├- eslint (NEW!)
|  ├- index.js (NEW!)
|  └- package.json (NEW!)
└- Packages
   ├- Core
   | ├- tsconfig.json
   | ├-┬ src
   | | └- MyModule.ts
   | └-┬ dist
   |   ├- MyModule.js
   |   └- MyModule.d.ts
   └┬ Web
    ├- tsconfig.json
    └-┬ src
      └- WebComponent.tsx

eslint/package.json：

  "name": "eslint-plugin-myApp",
  "version": "1.0.0",
  "main": "index.js"

eslint/index.js： 此自定义规则解析导入并将dist 替换为src，如果它匹配一个模式

module.exports.rules = 
  'no-dist-imports': (context) => (
    ImportDeclaration: (node) => 
      const path = node.source.raw.toString();
      if (path.includes('@myApp/core/dist')) 
        const fixedImport = node.source.raw.replace('dist', 'src');
        context.report(
          node: node.source,
          message: `Importing from dist`,
          fix(fixer) 
            return fixer.replaceText(node.source, fixedImport);
          ,
        );
      
    ,
  ),
;

.eslintrc.js（添加以下内容）

module.exports = 
  plugins: [
    'myApp',
  ],
  rules: 
    'myApp/no-dist-imports': 'error',
  ,
;

package.json（添加以下内容）

  "name": "myApp",
  "devDependencies": 
      "eslint-plugin-myApp": "file:./eslint",
  

这不是完美的解决方案，但它适用于团队。如果任何 dist 导入以某种方式使其通过了 IDE 的 lint on save 功能，我们在推送之前有一个脚本 lint。 dist 导入不再进入我们的 PR。

如果有更好的解决方案（最好修复导入：P），请告诉我们！