vscode插件开发，如何使用绝对路径导入js模块？

Question

vscode插件开发，如何使用绝对路径导入js模块？

我尝试以绝对路径导入js模块，智能提示没有问题，但运行调试就报错，如何解决这个问题？以下是详情。

jsconfig.js配置代码如下

{
    "compilerOptions": {
        "module": "Node16",
        "target": "ES2022",
        "checkJs": true, 
        "lib": [
            "ES2022"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"],
            
        }
    },
    "exclude": [
        "node_modules"
    ]
}

导入js模块代码内容，所在文件路径：src/util/TestUtil.js

let test={
    test123(){

    },
    test567(){

    }
}
module.exports= {

    test:test,
  };

以绝对路径导入，调用const TestUtil = require('@/util/TestUtil.js')代码导入，输入TestUtil加小数点，有智能提示的截图

运行提示错误

Activating extension 'undefined_publisher.vscode-plugin-todo' failed: Cannot find module '@/util/TestUtil.js'
Require stack:
- e:\Workspace\vscodePlugins\vscode-plugin-todo\src\box\box.js
- e:\Workspace\vscodePlugins\vscode-plugin-todo\extension.js
- e:\Users\hasee\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- e:\Users\hasee\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- e:\Users\hasee\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
- .

如何解决这个问题

Answer 1

jsconfig.js里面的paths只是让vscode能够识别你的路径别名，然后给你进行提示而已。
这也就是为什么你会看到webpack中会下面这个配置的原因：

alias: {
  '@': path.resolve(__dirname, 'src'),
},

所以，你需要给你的构建流程中配置上路径别名，这样require在遇到@时才知道如何解析。