webpack 不会将原型函数从另一个文件添加到 Object答案

【问题标题】：webpack doesnt add prototype function to Object from other filewebpack 不会将原型函数从另一个文件添加到 Object
【发布时间】：2020-07-14 16:58:36
【问题描述】：

我有一个包含对象定义的文件，在同一个文件中我有一个函数，它是该对象的一部分，如下所示：

export function ARScene(_callbacks) {

   this.callbacksObject = _callbacks;
   // more fancy code.. 
}

ARScene.prototype.changeCar = function() {
    //some fancy code here 
    this.loadHDCar(); // THIS LIKE GENERATES A ERROR. 
}

现在我有一个不同的文件，其中包含另一个方法，它是名为 ARScene 的对象的一部分，如下所示：

import { ARScene } from './arScene';

ARScene.prototype.loadHDCar = function() {
     //some more fancy code..
}

当我使用 webpack 构建它并在浏览器中运行它时会发生什么我收到错误 this.loadHDCar(); 是 undefined 我猜这是因为 webpack 如果未导入文件则不会添加文件。但是如何确保在最终输出中将ARScene.prototype.loadHDCar 添加到对象中？

我是 webpack 和模块的新手。我在 stackoverflow 上找到了关于此的答案，但他们的情况与我略有不同。所以他们的解决方案没有用（或者我不明白）。

如果需要更多上下文或信息，请告诉我。

【问题讨论】：

你为什么首先在不同的文件中定义该方法？像这样拆分一个类真的很奇怪，让你的代码很难被发现。
你如何确保ARScene 引用了单独文件中的构造函数？你import了吗？
因为那个类真的很大，而且在一个文件中变得很乱
然后将辅助函数（您可以import）移动到不同的文件，但不要移动整个方法定义。或者将类拆分为更小的对象以减少混乱。
@Bergi 查看关于您的第一条评论的编辑，关于您的第二条评论，您能举例说明您的意思吗？

标签： javascript webpack prototype es6-modules

【解决方案1】：

如何确保在最终输出中将ARScene.prototype.loadHDCar 添加到对象中？

您应该将它导入到 arScene 模块中，甚至应该在其中创建原型方法（定义类的地方）以提高可见性。

export function loadHDCar() {
    … //some more fancy code
}

import { loadHDCar } from './loadHDCar';

export function ARScene(_callbacks) {
    …
}
ARScene.prototype.loadHDCar = loadHDCar;
ARScene.prototype.changeCar = function() {
    … // some fancy code here 
    this.loadHDCar();
};

【讨论】：