Webpack导出模块未定义

Question

我想使用webpack为我的应用程序编译bundle.js。 我通过将导入和导出添加到我的* .ts文件中来创建依赖关系树。 尝试运行应用程序时遇到一个问题。

我有一个main.ts文件：

import { componentA, componentB } from 'moduleX';
import { componentC } from 'moduleC'

export var componentE: componentA;

$().ready(function () {

    if (componentA.someProperty === true) {

        ...
    }
}

export class MyClass extends componentC {
    ...
}

// end file

这是我的moduleX文件：

import { componentE } from 'main';
import { componentC } from 'moduleC'

export componentA extends componentC {

    ...

    if (componentE.someProperty === true) {

    }

    ...
}

运行构建开发人员并尝试运行我的应用程序后，我得到了类似的内容：

Uncaught ReferenceError: componentC is not defined
    at eval (moduleX.js?d3a3:5913)
    at Object../js/moduleX.js (bundle.js?8.0.0:96)
    at __webpack_require__ (bundle.js?8.0.0:20)
    at eval (main.ts?8a84:4)
    at Object../js/main.ts (bundle.js?8.0.0:163)
    at __webpack_require__ (bundle.js?8.0.0:20)
    at bundle.js?8.0.0:84
    at bundle.js?8.0.0:87

当我查看位于moduleX.js?d3a3:5913处的chrome来源时，我会看到：

var componentA = /** @class */ (function (_super) {
    __extends(componentA, _super);

    //componentA code

}(componentC));

我在}(componentC));中有一个错误：Uncaught ReferenceError: componentC is not defined。

问题出在哪里？ 你能帮我吗？

Answer 1

  

问题出在哪里？你能帮我吗？

您具有循环依赖性。

修复

删除它。

示例

例如foo依赖于bar依赖于baz依赖于foo（循环！）。

工具

各种。我也写了一个：https://alm-tools.gitbooks.io/alm/content/features/dependency.html