VS Code 插件开发中，模块导入的正确配置至关重要。本文分析了使用绝对路径导入JS模块时，智能提示功能正常却在运行时报错的问题，并提供了解决方案。
问题： 在VS Code插件开发中，使用绝对路径（例如 const testutil = require('@/util/testutil.js')）导入JS模块时，VS Code的智能提示能够正确识别模块，但运行时却出现“cannot find module '@/util/testutil.js'”的错误。 jsconfig.json 文件配置如下：
{
"compilerOptions": {
"module": "node16",
"target": "es2022",
"checkJs": true,
"lib": [
"es2022"
],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": [
"node_modules"
]
}
被导入的模块 src/util/testutil.js 内容如下：
let test = {
test123() {},
test567() {}
};
module.exports = { test };
原因： jsconfig.json 文件中的 paths 配置项仅用于 VS Code 的智能提示，不影响 Node.js 的模块加载机制。 paths 告知 VS Code 如何将 @/util/testutil.js 转换为 ./src/util/testutil.js 用于代码提示，但 Node.js 的 require 函数无法识别此映射关系。
解决方案： 类似于Webpack中的 alias 配置，需要在构建流程中添加路径别名。 Webpack 配置示例：
// webpack.config.js
module.exports = {
// ... other configurations
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
};
这段代码告诉Webpack将 @ 转换为项目 src 目录的绝对路径。 因此，需要根据所使用的构建工具（Webpack、Parcel、Rollup等），在构建配置中添加类似的路径别名配置，以便 require 函数正确解析 @/util/testutil.js。 这将确保在运行时能够正确加载模块。
