npm - 一个 package.json 文件中的两个模块

Question

我正在尝试创建一个独立于 UI 框架的插件。我不能做任何动态导入，所以我决定用汇总构建它两次。但是现在我遇到了无法分别导入不同文件的问题。

我的结构看起来如何:

- dist
    - quasar.js
    - vuetify.js

在我的 package.json 中，我将 dist 作为主体。但是，当我在我的应用程序中尝试以下操作时，出现错误:

import VueScanField from 'vue-scan-field/quasar'

错误:

This dependency was not found:

* vue-scan-field/quasar in ./src/boot/vue-scan-field.ts

我的 package.json 中的 main 变量可能有问题。这就是它无法识别 /quasar 的原因。有人有什么想法吗？

我试过子路径导出，但结果相同。我的配置如下所示:

  "exports": {
    "./quasar": "./dist/quasar.js",
    "./vuetify": "./dist/vuetify.js"
  },

但是还是报同样的错误

Answer 1

尝试在 package.json 中填充 exports 字段。文档解决了您描述的确切用例:

Subpath exports

When using the "exports" field, custom subpaths can be defined alongwith the main entry point by treating the main entry point as the "."subpath:

{
  "main": "./main.js",
  "exports": {
    ".": "./main.js",
    "./submodule": "./src/submodule.js"
  }
}

Now only the defined subpath in "exports" can be imported by aconsumer:

import submodule from 'es-module-package/submodule';
// Loads ./node_modules/es-module-package/src/submodule.js

While other subpaths will error:

import submodule from 'es-module-package/private-module.js';
// Throws ERR_PACKAGE_PATH_NOT_EXPORTED

更多信息:

• https://nodejs.org/api/packages.html#packages_subpath_exports
• https://webpack.js.org/guides/package-exports/

演示场景

文件夹结构:

├── package // the package we want to distribute
│   ├── package.json
│   ├── submodule1.js
│   └── submodule2.js
├── main.js // consumer script
└── package.json

子模块内容:

// ./package/submodule1.js
export default 'submodule1.js'

// ./package/submodule2.js
export default 'submodule2.js'
export const name = 'second submodule'

在 ./package/package.json 中，我为这些文件定义了子模块导出:

{
    "name": "my-package",
    "type": "module", // enable ESM imports
    "exports": {
        "./a": "./submodule1.js",
        "./b": "./submodule2.js"
    }
}

然后我使用 npm install ./package 在消费者项目中安装了 ./package 目录，它在 ./package.json 中添加了一个条目>

{
    "name": "consumer",
    "type": "module",
    "dependencies": {
        "my-package": "file:package"
    }
}

现在，我可以从 ./main.js 导入子模块(包括默认导出和命名导出):

import a from 'my-package/a'
import b, {name as bName} from 'my-package/b'

console.log(a);
console.log(b);
console.log(bName);

打印:

submodule1.js
submodule2.js
second submodule

我可以通过将根包导出显式设置为 null(或者完全忽略它)来阻止导入基础包并只允许子模块:

{
    "name": "my-package",
    "main": "main.js",
    "type": "module",
    "exports": {
        ".": null, // prevent importing root package
        "./a": "./submodule1.js",
        "./b": "./submodule2.js"
    }
}

导致这段代码抛出错误

import mypackage from 'my-package'

node:internal/process/esm_loader:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /path/to/demo/node_modules/my-package/package.json imported from /path/to/demo/index.js
    at new NodeError (node:internal/errors:329:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:337:9)
    ...
    at link (node:internal/modules/esm/module_job:56:36) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}