如何在浏览器中使用模块，还可以在DevTools中引用变量和函数? [英] How can I use modules in the browser, but also refer to variables and functions from within DevTools?

问题描述

我的HTML设置如下:

I have my HTML setup like this:

<script type="module" src="main.js"></script>

，所有ES6模块都可以正常工作.唯一的问题是，现在我无法在DevTools中引用任何内容(例如使用控制台并输入变量以查看其值或手动使用函数).如何在能够使用DevTools的同时导入模块?谢谢！

and all the ES6 modules work fine. The only problem is I now can't refer to anything from within DevTools (like using the Console and typing in a variable to see it's value or using a function manually). How do I import modules whilst being able to use the DevTools? Thanks!

推荐答案

对于其他感兴趣的人，如果您对它感到满意，请使用Webpack之类的捆绑器.我不相信(至少在这一点上)浏览器本身将能够在模块上使用DevTools(其他解决方案非常笨拙，并且使用起来并不理想).

For anyone else interested, if you're comfortable with it, use a bundler like Webpack. I don't believe (at least at this point) that the browser will by itself be able to use the DevTools on modules (the other solutions are quite janky, and aren't fantastic to work with).

希望在将来，当所有主要的浏览器将能够在没有捆绑器的情况下支持ES6模块时，我们将能够使用DevTools.

Hopefully in the future, when all major browsers will be able to support ES6 modules without a bundler, we'll be able to use DevTools.

这篇关于如何在浏览器中使用模块，还可以在DevTools中引用变量和函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！