Javascript OpenLayers:为什么console.log浏览器可以找到变量_Javascript_Webpack_Gis_Openlayers_Webpack Encore

Javascript OpenLayers:为什么console.log浏览器可以找到变量

javascript webpack gis openlayers

Javascript OpenLayers:为什么console.log浏览器可以找到变量,javascript,webpack,gis,openlayers,webpack-encore,Javascript,Webpack,Gis,Openlayers,Webpack Encore,我试图从浏览器控制台.logol_映射，但它给我一个未定义的错误。命令通过代码工作。为什么会发生这种情况我使用Symfony框架，并使用网页包Encore来管理我的资产文件：map.js 文件：map.html.twig {% extends '::base.html.twig' %} {# STYLESHEETS-------------------------------------------------- #} {% block stylesheets %} {{ paren

我试图从浏览器控制台.logol_映射，但它给我一个未定义的错误。命令通过代码工作。为什么会发生这种情况

我使用Symfony框架，并使用网页包Encore来管理我的资产

文件：map.js

文件：map.html.twig

{% extends '::base.html.twig' %}
{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('build/map.css') }}" rel="stylesheet" />
    {#<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" type="text/css"/>#}
{% endblock %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <div class="arrow_box" id="popup-container" style="display: none;"></div>

    <script src="{{ asset('build/map.js') }}"></script>
</body>
{% endblock %}
{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
    {{ parent() }}
    {#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}
{% endblock %}

以下是我对上述评论的详细解释：

在Webpack中，每个文件导入和导出代码。当为浏览器传输/打包代码时，这些模块中的每一个都包含在一个模块中，确保内部代码不会泄漏到其他模块中。这一点非常重要，否则您必须始终确保不会意外地覆盖来自其他模块的变量或函数

我猜您错误地认为，您的顶级模块是不同的，并且内容被导出到浏览器的顶级窗口范围。事实并非如此

浏览器的控制台在主作用域上工作，其中内部变量ol_映射未知。当然，这个变量在某个地方，但它在某个函数中的某个地方，甚至更深，在一个子函数中。可能您的变量也被webpack重命名以减小代码占用空间，因此即使在代码中添加调试断点，您也可能无法立即识别您的变量，但它确实存在

但是，您可以从模块内部访问一些全局对象：窗口是浏览器窗口对象。它代表了全球范围。例如，当您编写var x='hello'时；在控制台中，该变量x将成为window的一个属性

因此，通过在代码中编写window.ol\u map=ol\u map，您可以创建一个全局变量，然后您可以在浏览器和浏览器控制台中轻松访问该变量。

@aurelian是的，这没有什么区别，我得到了相同的错误。您能通过开发人员的工具查看代码映射吗？也许webpack也会丑化const变量？是的，如果我理解正确，我可以通过sources选项卡看到您所指的代码？如果webpack不丑化代码，则可能是范围问题。我猜有些代码是用OL代码包装的。@dube是的，你的把戏很管用，你能解释一下为什么会这样吗？也把你的答案贴出来，标记为回答谢谢，你的解释很完美，我知道我明白发生了什么。

{% extends '::base.html.twig' %}
{# STYLESHEETS-------------------------------------------------- #}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('build/map.css') }}" rel="stylesheet" />
    {#<link href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" type="text/css"/>#}
{% endblock %}
{# PAGE CONTENT-------------------------------------------------- #}
{% block title %}OpenLayers example{% endblock %}
{% block body %}
<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <div class="arrow_box" id="popup-container" style="display: none;"></div>

    <script src="{{ asset('build/map.js') }}"></script>
</body>
{% endblock %}
{# JAVASCRIPTS-------------------------------------------------- #}
{% block javascript %}
    {{ parent() }}
    {#<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>#}
{% endblock %}