一个 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

尝试填写exports字段package.json。文档解决了您所描述的确切用例：

\n

\n

子路径导出

\n

使用“导出”字段时，可以通过将主入口点视为“.”子路径，\n与主入口点一起定义自定义子路径：

\n

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

\n

现在消费者只能导入“exports”中定义的子路径：

\n

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

\n

而其他子路径会出错：

\n

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

\n

\n

更多信息：

\n

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

\n

演示场景

\n

文件夹结构：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package // the package we want to distribute\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 submodule1.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 submodule2.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.js // consumer script\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

子模块内容：

\n

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

\n

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

\n

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

\n

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

\n

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

\n

现在，我可以从以下位置导入子模块（默认导出和命名导出）./main.js：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package // the package we want to distribute\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 submodule1.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 submodule2.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.js // consumer script\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 package.json\n

\n

打印：

\n

submodule1.js\nsubmodule2.js\nsecond submodule\n

\n

我可以通过显式地将根包导出设置为null（或完全省略它）来阻止导入基础包并仅允许子模块：

\n

// ./package/submodule1.js\nexport default \'submodule1.js\'\n\n// ./package/submodule2.js\nexport default \'submodule2.js\'\nexport const name = \'second submodule\'\n

\n

这会导致此代码抛出错误

\n

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

\n

node:internal/process/esm_loader:74\n    internalBinding(\'errors\').triggerUncaughtException(\n                              ^\n\nError [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\n    at new NodeError (node:internal/errors:329:5)\n    at throwExportsNotFound (node:internal/modules/esm/resolve:337:9)\n    ...\n    at link (node:internal/modules/esm/module_job:56:36) {\n  code: \'ERR_PACKAGE_PATH_NOT_EXPORTED\'\n}\n

\n