如何从开发工具控制台使用 ES6 模块

Question

据我了解，如果我创建一个 ES6 模块，我只能从本身就是一个模块的代码中导入它。这意味着非模块代码，即内联 Javascript，或 Chrome 开发工具控制台永远无法访问模块中的代码。

真的吗？有什么办法解决这个问题，因为它似乎是一个相当极端的限制。

原文由 Timmmm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 Chrome 的控制台中使用 动态导入。

 import('path/to/module.js').then(m => module = m)

// [doSomething] is an exported function from [module.js].
module.doSomething()

原文由 Kin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用类似 window.myFunction = myFunction 或 window.myVariable = myVariable 的行在全局命名空间中注册函数或变量。您可以在声明 myFunction 或 myVariable 的模块中执行此操作，或者在导入它们的单独模块中执行此操作。

完成此操作后，您将能够从 Chrome DevTools 控制台使用 myFunction 和 myVariable 。

例如：

 import myModule from '/path/to/module.js';
window.myModule = myModule;

// in the console:
myModule.foo();

（感谢@Evert 在评论中提供了这个解决方案，尽管是以一种相当迂回的方式让我花了一段时间才弄清楚。）

原文由 Carl 发布，翻译遵循 CC BY-SA 4.0 许可协议