Javascript：如何从另一个导入的模块中访问导入的模块变量？答案

【问题标题】：Javascript: How to access an imported module variable from inside another imported module?Javascript：如何从另一个导入的模块中访问导入的模块变量？
【发布时间】：2021-02-13 16:20:42
【问题描述】：

我有一个脚本可以导入很多不同的文件，如下所示：

<script type="module">
import * as A from '...';
import * as B from '...';
import * as C from '...';

我有自己的模块，我也想在其中导入和使用 A、B、C。目前我在'myfile.js'中有这个sn-p：

var init = (function () {
    console.log(A,B,C);
})();
export { init };

如果我在所有其他类似之后添加导入：

<script type="module">
import * as A from '...';
import * as B from '...';
import * as C from '...';
import * as my from 'myfile.js';

我收到未定义 A、B、C 的错误。如何让它发挥作用？

编辑澄清：

A,B,C 存在于 import 语句之后，所以我可以像这样访问它们：

import * as A from ....
console.log(A);
import * as B from ...
console.log(B);

我也可以从模块内部访问全局变量，例如：

import * as A from ....
console.log(A);
import * as B from ...
console.log(B);
import * as my from 'myfile.js'

我的文件.js：

var init = (function (t) {

    console.log(t);

})(window.innerWidth);

export { init };

这会打印窗口宽度。

我正在寻找类似的功能：

var init = (function (t) {

    console.log(t);

})(A);

export { init };

回调函数很像导入我的模块，然后调用一个函数并将 A 作为参数传递给它，我可以在没有回调的情况下做到这一点。

【问题讨论】：

标签： javascript javascript-import

【解决方案1】：

你不能。完全实现模块解析以不拉出全局范围并避免程序员问“这个变量是否存在吗？”。因此，您可以使用旧式 JavaScript，禁用模块系统。不要将“myfile”用作模块，而是将其用作全局导入：

<script src="myfile.js"></script>

如果您使用的是构建阶段，这很危险。

或者，更好的是，您可以避免对 A、B 和 C 的任何显式引用，因为此时您不知道它们是否存在。您可以使用回调：

var init = function (cb) {
    cb();
};

// use:
import {init} from ...
init(() => console.log(A,B,C));

PS。您正在混合新旧语法

【讨论】：

变量在导入后会立即退出，如果这很重要的话。如果我在各自的导入语句之后 console.log A、B、C，它们将被打印出来。所以你是说我不能访问我的模块范围之外的任何东西？
你太自信了！我不会的。是的，您无法访问模块范围之外的任何内容。这是模块的主要用途
我很有信心，因为我运行了代码 - 请参阅我的 EDIT - 它可以工作。

【解决方案2】：

您将它们作为组件导出，我猜是使用 {} 大括号进行初始化。如果要将它们作为组件导出，则必须在要导出的模块旁边使用 default 关键字。尝试导出默认 {init}；

【讨论】：

【解决方案3】：

在 JavaScript 中，作用域是由代码块、函数、模块创建的。因此模块变量在模块之外是不可访问的（除非使用 export 显式导出）。

如果你想在myFile.js 中使用它们，你应该在其中导入A、B、C。

所以myFile.js 将是：

import * as A from '...';
import * as B from '...';
import * as C from '...';

var init = (function () {
    console.log(A,B,C);
})();
export { init };

这是Scopes in JavaScript上的一些有用的文章

【讨论】：