typescript 和babel插件模块解析器:VS代码无法解析导入

brgchamk  于 2023-01-14  发布在  TypeScript
关注(0)|答案(2)|浏览(142)

我目前正在学习使用typescript,但是我在VS Code上遇到了一个问题。我已经用Babel 7和一些插件建立了一个基本的项目。我使用命令npm run dev运行脚本。下面是我的依赖项的完整列表:

//package.json
"scripts": {
  "dev": "nodemon src/index.ts --extensions \".ts\" --exec babel-node"
},
"devDependencies": {
  "@babel/cli": "^7.1.2",
  "@babel/core": "^7.1.2",
  "@babel/helper-plugin-utils": "^7.0.0",
  "@babel/node": "^7.0.0",
  "@babel/plugin-proposal-async-generator-functions": "^7.1.0",
  "@babel/plugin-proposal-class-properties": "^7.1.0",
  "@babel/plugin-proposal-decorators": "^7.1.2",
  "@babel/plugin-proposal-optional-catch-binding": "^7.0.0",
  "@babel/plugin-proposal-optional-chaining": "^7.0.0",
  "@babel/plugin-transform-modules-commonjs": "^7.1.0",
  "@babel/plugin-transform-typescript": "^7.1.0",
  "babel-plugin-module-resolver": "^3.1.1"
}

下面是我的2.ts文件的内容。

// src/script.ts
export default function (arg:string): string {
  return arg;
};

// src/index.ts
import Fn from "@/script";
console.log( Fn("Hello World") );

这是我的Babel配置文件:

//babel.config.js
module.exports = {
  "plugins": [
    ["@babel/plugin-transform-typescript"],
    ["@babel/plugin-transform-modules-commonjs"],
    ["@babel/plugin-proposal-async-generator-functions"],
    ["@babel/plugin-proposal-optional-catch-binding"],
    ["@babel/plugin-proposal-optional-chaining"],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],//must be after @babel/plugin-proposal-decorators

    ["module-resolver", {
      //"root": ["./src", "./test"],
      "alias": {
        //"__root": ".",
        "@": "./src",
        //"#": "./src/assets",
        //"_": "./src/assets/_",
        //"!": "./static"
      },
    }]
  ]
};

和我的Typescript配置文件:

// tsconfig.json
{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@": ["./src"]
      }
  }
}

当我运行这段代码时,它看起来很好,我在控制台中看到"Hello World"。但是,VS代码似乎不理解路径 "@/script "。它带有红色下划线,工具提示如下
[ts]找不到模块"@/script "。
如果我不使用babel-plugin-module-resolver插件,而是使用路径"./script",我就不会有这个问题。有什么方法可以解决这个问题吗?
谢谢!

bvuwiixz

bvuwiixz1#

tsconfig.jsonpaths的语法错误。它应该是:

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

请参见文档本节中的第二个示例。

busg9geu

busg9geu2#

基于js或ts,你可以添加jsconfig.json/tsconfig.json到你的项目根目录中。请在里面包含下面的代码。

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

相关问题