使用未定义的 webpack 类捆绑 js 文件答案

【问题标题】：Bundling js files with webpack class undefined使用未定义的 webpack 类捆绑 js 文件
【发布时间】：2017-11-12 10:06:18
【问题描述】：

我将以下文件内容捆绑在一起：

a.js:

class BaseC {
    doIt(){
        console.log(this);
    }
}

class A extends BaseC{
}

b.js：

class B extends BaseC{
}

var b = new B()

b.doIt();

这些都捆绑在最终的 app.bundle.js 中。运行它时，我得到："Uncaught ReferenceError: BaseC is not defined"。这对我来说很奇怪，因为我可以看到它首先在 app.bundle.js 中定义在其余类之前，如下所示：。

var BaseC = function () {
    function BaseC() {
        _classCallCheck(this, BaseC);
    }

    _createClass(BaseC, [{
        key: "doIt",
        value: function doIt() {
            console.log(this);
        }
    }]);

    return BaseC;
}();

有什么线索吗？

P.S：我没有使用 require/import 系统。我知道这是通常使用 webpack 的方式，但我正在做的是提供一个数组，其中包含我想使用 glob 模块捆绑到 webpack 的所有 js 文件，并期望通过这样一个简单的示例，它应该可以工作。

【问题讨论】：

您是在a.js 文件中导出BaseC 类并在b.js 中导入它吗？
感谢您的回复。 kristaps 说了同样的话，但他的意思是，即使导出/导入工作，它应该工作而不必这样做，因为它已经在 app.bundle.js 文件中定义 - George Avgoustis 刚刚编辑
这与上下文有关。 BaseC 存在于文件 a.js 但不存在于 b.js 的上下文中。为了让b.js 使用BaseC，它必须被导入或需要。按照下面克里斯塔普斯的回答。
How does webpack handle multiple files importing the same module React的可能重复
阅读此stack question，这些模块不会被复制，但它们在使用它们的文件的上下文中是必需的。

标签： javascript webpack ecmascript-6

【解决方案1】：

尝试从 a.js 导出类： export class BaseC { ...

并将其导入 b.js： import {BaseC} from './a.js' ...

【讨论】：

问题是，即使导出/导入工作，它应该工作而不必这样做，因为它已经在 app.bundle.js 文件中定义
我同意。必须有一种方法，不必在一个简单的网站中到处导入东西......