未定义 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

Where is the problem? Will you help me with that?

你有循环依赖。

修复

删除它。

例子

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

工具

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

未定义 Webpack 导出模块

Webpack export module is not defined

dependencies

bundle

typescript

webpack

修复

例子

工具