Webpack 使用库的 ESM 部分，尽管它需要 CommonJS？

Question

我目前遇到一个奇怪的问题： Uncaught (in promise) ReferenceError: Cannot access 'Agile' before initialization, 这可能是由于 webpack 试图将我的库的 ESM 部分正确地转换为 CommonJs。不幸的是，它做得不好，我最终遇到了上述错误。

我的图书馆同时支持：CommonJs 和 ESM。 所以我想知道为什么 webpack 使用 ESM 部分并将其转换为 CommonJs，而不是直接使用我库中的 CommonJs 部分？！

为什么我这么确定它与ESM到CommonJs的转换有关？

好吧，我曾经通过删除 ESM 支持来强制 webpack 使用我的库的 CommonJs 部分。通过这样做，我只是删除了 package.json 库中 ESM 模块的路径。

"module": "dist/esm/index.js"

取消支持ESM后，webpack被迫使用CommonJs部分它按预期工作，因为 webpack 不再需要转换任何东西。（见图）

ESM 转换为 CommonJS [无效]

未转换CommonJS[工作中]

由于我的库应该同时支持：ESM 和 CommonJS，简单地不支持 ESM 是没有解决办法的。

这是我图书馆的package.json：

{
  "name": "@agile-ts/core",
  "version": "0.2.0+17b078aa",
  "author": "BennoDev",
  "license": "MIT",
  "homepage": "https://agile-ts.org/",
  "description": "Spacy, Simple, Scalable State Management Framework",
  "keywords": [
    // ..
  ],
  "main": "dist/index.js",       // <!-- CommonJs
  "module": "dist/esm/index.js", // <!-- ESM
  "types": "dist/index.d.ts",
  "scripts": {
   // ..
  },
  "dependencies": {
    "@agile-ts/utils": "^0.0.8"
  },
  "peerDependencies": {
    "@agile-ts/logger": "^0.0.8"
  },
  "peerDependenciesMeta": {
    "@agile-ts/logger": {
      "optional": true
    }
  },
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/agile-ts/agile.git"
  },
  "bugs": {
    "url": "https://github.com/agile-ts/agile/issues"
  },
  "files": [
    "dist",
    "LICENSE",
    "README.md",
    "CHANGELOG.md"
  ],
  "sideEffects": false
}

也许我在 package.json 中配置错误因此 webpack 使用 ESM 尽管它需要 CommonJs?

节点版本：v16.3.0
Github 回购：https://github.com/agile-ts/agile/tree/master/packages/core

Answer 1

好的，我解决了所有问题 circular dependencies ^^

参见：https://github.com/agile-ts/agile/issues/193

Webpack 使用库的 ESM 部分，尽管它需要 CommonJS？

Webpack uses ESM part of library although it requires CommonJS?

javascript

commonjs

reactjs

webpack

es6-modules