首页 > 解决方案 > Webpack 导出模块未定义

问题描述

我想使用 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));:中有一个错误Uncaught ReferenceError: componentC is not defined

问题出在哪里?你会帮我解决这个问题吗?

标签: typescriptwebpackdependenciesbundle

解决方案


问题出在哪里?你会帮我解决这个问题吗?

你有一个循环依赖。

使固定

去掉它。

例子

例如foo,dependends onbar取决于baz取决于foo(循环!)。

工具

各种各样的。我也写过一篇:https ://alm-tools.gitbooks.io/alm/content/features/dependency.html


推荐阅读