包裹别名未向 tslint 注册

Posted 2023-02-23

【中文标题】包裹别名未向 tslint 注册

【英文标题】：Parcel alias not registering with tslint

【发布时间】：2020-04-10 22:45:17

【问题描述】：

我正在使用 parcel-bundler 与 TypeScript 进行反应，并且我在 package.json 中设置了一些别名。

这是我的 tsconfig.json

  "compilerOptions": 
    "allowJs": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": 
      "~*": ["./src/*"]
    
  ,
  "include": ["./declarations.d.ts", "global.d.ts"]

这是我的别名

"alias": 
  "#types": "./src/types",
  "#App": "./src/App",
  "#helpers": "./src/helpers",
  "#shared": "./src/shared"

当我使用这些别名导入任何东西时

import Button from "#shared/Button";

它在它们下划线，在 Vscode 中说 Cannot find module #shared/Button

但是，该应用程序运行良好。那么我应该如何告诉 tslint，有来自 parcel 的别名导入？

【参考方案1】：

首先，删除 package.json 中的所有别名以避免混淆。

然后将其安装为开发依赖项：

npm install --save-dev babel-plugin-module-resolver

将波浪号改为哈希：

  "compilerOptions": 
    "allowJs": true,
    "jsx": "react",
    "baseUrl": ".",
    "paths": 
      "#*": ["./src/*"]
    
  ,
  "include": ["./declarations.d.ts", "global.d.ts"]

将插件添加到.babelrc:

  "plugins": [
    ["module-resolver", 
      "root": ["."],
      "alias": 
        "#shared": "./src/shared"
      
   ]
 ]

注意：babelrc 中的别名不能连接目录。它必须是完整路径。