如何让 VSCode 认识你正在开发的 NPM 模块

256 阅读1分钟

假如你正在开发一个 NPM 模块 echox,并且在 src/index.js 里面导出了一系列方法:

// ./src/index.js
export function html() {
 // ...
}

然后在 tests/index.spec.js 里面新增了以下一行:

// ./tests/index.spec.js
import * as X from 'echox';

如何让 VSCode 认识 echox?或者更具体的是:如何通过 cmd + 点击上面一行的 'echox' 跳转到对应的源码?

这里的解决办法是修改 packge.jsonexports.default 字段如下:

{
  "exports": {
    "default": "./src/index.js"
  }
}

这样就可以得到如下的结果:

image.png

可以发现 "echox" 已经被 VSCode “认识”了!

这是因为 IDE 会在 package.jsonnode_modules 两个地方去解析依赖。当在 package.json 指定了 exports.default 之后,IDE 将知道:无论何时尝试导入开发模块且未指定特定子路径,都应加载 src/index.js 文件,从而“认识”了开发模块。

完整的代码可以参考在这里 #55,如果觉得不错的话可以给 echox 点一个 star!