实例化模块 A 中定义的对象并在模块 B javascript 中使用其方法答案

【问题标题】：Instantiate an object defined in module A and use its methods in module B javascript实例化模块 A 中定义的对象并在模块 B javascript 中使用其方法
【发布时间】：2021-06-14 17:05:47
【问题描述】：

我正在从事一个网络开发项目。

现在我正在使用第 3 方库在一个名为 fileA.js 的文件中实例化该库的一个对象

我也是这样：

import libraryExport from "./librarymain.js"

var object = libraryExport( ... );
export default object;

现在，在 fileB.js 中，我想使用实例化对象具有的方法，例如：

import object from "fileA.js"
object.methodOfTheLibrary();

但是，当我在浏览器控制台中运行它时，我总是得到“methodOfTheLibrary 不是一个函数”，这意味着，从我的角度来看，该库没有在 fileB.js 中正确导入

注意：我正在使用 webpack 来捆绑我的所有文件，并且一切都在编译和捆绑，直到我遇到问题。我通常以高级方式了解 C++，但对于 JS，我仍然不完全了解如何解决此类导入问题。

感谢您的帮助

【问题讨论】：

你试过在fileA.js中调用object.methodOfLibrary()吗？
是的，先生。它有效。问题是 fileA 只是我用来初始化 3rd 方库对象的地方，在 FileB 中有一些流程正在触发我正在尝试使用的功能。 @zr0gravity7
您可以尝试在您的fileB.js 中使用console.logging object，看看您实际获得了什么。在此之前，您是否通过 Webpack 设置成功地在模块之间导出和导入对象？
我会试试的。使用我的 webpack 设置，我一直在这样做，但仅使用自定义方法、变量等。这是我第一次使用 3rd 方代码进行此操作
好的，所以我正在打印对象并且我得到了一堆库的东西，但是库提供的大多数功能似乎并不在对象内部。图书馆是国际电话输入。 @zr0gravity7

标签： javascript webpack

【解决方案1】：

一般*建议您避免直接在另一个模块的主体中使用导入的模块。（您自己的一个模块，即......正如您稍后会看到的，第三方模块通常可以使用。）

最大的问题是加载顺序。如果您的fileA 还导入了一些其他模块，该模块导入了另一个模块，然后导入了fileB，那么fileB 将尝试运行，并且由于fileA 仍在尝试加载依赖项，object 实际上不会有尚未实例化。

您要么需要仔细检查您的依赖关系以寻找这样的循环，然后消除它或，如果可能，重组 fileA 以包装您的入口点完成加载后可以调用的函数中的代码（这将保证所有其他模块都已解析）：

// fileB.js

import object from "fileA.js"

export function init() {
  object.methodOfTheLibrary();
}

// main.js

import init from "fileB.js";

init();

* “一般”意味着有很多完全可以接受的情况。您只需要注意陷阱并减轻这些情况。

【讨论】：

是的，这是有道理的！我一直在用 C++ 编译器处理这类问题，但我现在还是有点害怕 JS，因为我正在以更专业的方式使用它！我解决了与这个答案非常相似的问题：我确实让 export = ;做到了！现在我想知道在声明时导入变量并在文件末尾执行它有什么区别
@FrankPonte - 不确定“在声明时导入变量”是什么意思。如果您使用标准 JS 或 webpack 之类的打包程序，那么导入是“hoisted”，这意味着无论它们出现在模块中的什么位置，它们都会在模块中的任何其他逻辑之前有效地运行。导入的顺序很重要，但它们出现在模块中的位置并不重要。