VS Code 插件开发中，正确导入 JavaScript 模块至关重要。本文分析并解决一个常见问题：使用绝对路径导入模块时，VS Code 智能提示正常，但运行时却报错“Cannot find module”。
问题现象： 开发者在 VS Code 插件开发中，使用绝对路径（例如 @/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 };
导入语句：const testutil = require('@/util/testutil.js');
智川X-Agent
中科闻歌推出的一站式AI智能体开发平台
126 查看详情
问题根源及解决方案：
jsconfig.json 文件中的 paths 配置只对 VS Code 的代码提示有效，不影响 Node.js 的模块解析机制。paths 告诉 VS Code 如何将 @/util/testutil.js 映射到 ./src/util/testutil.js，从而实现代码补全和跳转。然而，Node.js 的 require 函数在运行时并不会读取 jsconfig.json 中的 paths 配置。
解决方法是：在构建流程中配置路径别名。 这需要根据你使用的构建工具（Webpack, Parcel, Rollup 等）进行相应的配置。 例如，使用 Webpack，可以在 webpack.config.js 中添加如下配置：
const path = require('path');module.exports = { // ... other webpack configurations resolve: { alias: { '@': path.resolve(__dirname, 'src') } }};
这样，Webpack 在打包过程中就会将 @ 替换成 src 的绝对路径，从而正确解析模块。 其他构建工具的配置方法类似，请参考你所用工具的官方文档。 关键在于让你的构建工具理解并使用 @ 这样的路径别名。
以上就是VS Code插件开发中，智能提示正常但运行时报错“Cannot find module”？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/279116.html
微信扫一扫 
支付宝扫一扫 
