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) {

    }

    ...
}

在运行build dev并尝试运行我的应用程序后，我得到了如下内容：

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

当我在chrome的moduleX.js?d3a3:5913上查看源代码时，我可以看到：

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

    //componentA code

}(componentC));

并且我在}(componentC));出错}(componentC)); ： Uncaught ReferenceError: componentC is not defined 。

问题出在哪儿？ 您能帮我吗？

Answer 1

问题出在哪儿？ 您能帮我吗？

您具有循环依赖性。

固定

去掉它。

例

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

工具

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