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 内容如下：

科学计算器在线使用工具代码

html5 css3制作在线科学计算器ui布局，3D计算器面板，加减乘除数字计算器工具特效。

下载

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。 这将确保在运行时能够正确加载模块。