NPM包路径未导出报错问题排查及解决方案

我开发首个NPM包时遇到了问题：包能正常构建出ESM和CommonJS目标文件，也能通过yarn、npm安装到node_modules，但导入模块时一直提示Package path ./src/Application is not exported from package。试了各种导入路径都没用，最后通过精准配置package.json的exports字段解决了问题，这个配置能适配Node、ESM、CJS环境，还支持/dist、/src路径导入以及IDE类型提示。

报错代码示例 #

// 加载应用对象并挂载UX
import {app} from "@myproject/package/src/Application";
document.body.onload = () => {
    app.attachUx(document.body);
};

// 编译错误：
// Module not found: Error: Package path ./src/Application is not exported from package

尝试过的导入方式 #

import {app} from "@myproject/package/src/Application";
import {app} from "@myproject/package/src/Application.js";
import {app} from "@myproject/package/Application";
import {app} from "@myproject/package/Application.js";
import {app} from "@myproject/package/dist/cjs/Application";
import {app} from "@myproject/package/dist/cjs/Application.js";
import {app} from "@myproject/package/dist/esm/Application";
import {app} from "@myproject/package/dist/esm/Application.js";

最终生效的exports配置 #

"exports": {
    "./*": {
        "import": "./dist/esm/*.js",
        "require": "./dist/cjs/*.js",
        "node": "./src/*.ts"
    },
    "./dist/*": {
        "import": "./dist/esm/*",
        "require": "./dist/cjs/*"
    },
    "./src/*": "./src/*.ts"
}

内容的提问来源于stack exchange，提问作者Daniel