VSCode插件JS模块导入报错？

在VS Code插件开发中，使用绝对路径（例如`@/util/testutil.js`）导入JS模块时，虽然VS Code智能提示正常，但运行却报错“cannot find module '@/util/testutil.js'”？本文针对此问题，深入分析了`jsconfig.json`的`paths`配置仅作用于VS Code智能提示，而Node.js的`require`函数无法识别该映射关系的根本原因。 解决方案是通过Webpack、Parcel或Rollup等构建工具，在构建配置中添加路径别名，例如使用Webpack的`resolve.alias`配置将`@`映射到项目`src`目录，从而解决运行时模块加载失败的问题，确保插件正常运行。

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

以上就是《VSCode插件JS模块导入报错？》的详细内容，更多关于的资料请关注golang学习网公众号！