如何在浏览器的 JavaScript 控制台中访问 ES6 模块中定义的函数？答案

【问题标题】：How to access functions defined in ES6 module in a browser's JavaScript console?如何在浏览器的 JavaScript 控制台中访问 ES6 模块中定义的函数？
【发布时间】：2017-11-05 09:42:59
【问题描述】：

我有一个在 ES6 模块 (sender.js) 中定义的函数，如下所示：

function send() {
   // do stuff
}
export {send};

然后在应用程序的主 JavaScript 文件 app.js 中使用该模块，如下所示：

import {send} from "./sender"

send 函数在 app.js 文件中可用，但是 它在 Firefox 的 Javascript 控制台中没有：

> send
ReferenceError: send is not defined

如何在 JavaScript 控制台中导入 send 函数？

【问题讨论】：

任何浏览器都不支持 ES 6 模块，所以我假设你使用的是 Babel，对吧？
是的，我正在使用 Babel
你是否在使用任何打包工具，例如 webpack、Browserify 或 Rollup？

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

您可以通过将特定功能分配给全局对象来将其设置为全局 - 在浏览器中是window。

import {send} from "./sender";
window.send = send;

请注意，虽然它可能在调试中有用，但您不应该在生产代码中使用它 - 请参阅 Why are global variables considered bad practice?

【讨论】：

我想知道的是，既然send 是在文件中声明的，而不是被包装在任何函数中，那不应该是全局的吗？这是否特定于通过 import 加载的文件？
@IonicăBizău 我认为这取决于 OP 使用的捆绑程序。这种行为对我来说似乎是合乎逻辑的，因为应用程序不需要公开任何功能。例如，Rollup complies the code in question to an empty file。
@IonicăBizău 是的，这是针对他们的。使用 import 加载的文件是模块，模块有自己的作用域。这就是模块的目的——模块化而不污染全局范围。
@estus 听起来不错！是的，我是从本机的角度问的，没有捆绑器。谢谢！
@MichałPerłakowski 有没有办法在浏览器中访问模块的所有功能