OpenLayers：为什么浏览器中的 console.log 可以找到变量

Question

我试图从浏览器 console.log(ol_map)，但它给我一个 未定义 错误。该命令在 code.Why 期间有效吗？

我使用 Symfony 框架，使用 Webpack Encore 来管理我的资产。

This is a screenshot from the browser

文件：map.js

require('ol/ol.css');
require('../css/map.css');

import View from 'ol/view';
import VectorLayer from 'ol/layer/vector';
import TileLayer from 'ol/layer/tile';
import Map from 'ol/map';

var proj = require('ol/proj').default;
var ol_Map = require('ol/map').default;
//var ol_layer_Tile = require('ol/layer/tile').default;
var ol_source_OSM = require('ol/source/osm').default;
var ol_View = require('ol/view').default;
var coordinate = require('ol/coordinate').default;
//var VectorLayer = require('ol/layer/vector').default;
var VectorSource = require('ol/source/vector').default;
var GML = require('ol/format/gml').default;
var WFS = require('ol/format/wfs').default;

const ol_map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new ol_source_OSM()
        }),
        //new VectorLayer({
        //    source: new VectorSource({
        //        format: new WFS(),
        //        url: 'http://environment.data.gov.uk/ds/wfs?SERVICE=WFS&INTERFACE=ENVIRONMENTWFS--864c72de-d465-11e4-855f-f0def148f590'
        //    })
        //})
    ],
    view: new ol_View({
        //cordinates in ESPG3857
        center: [-254382.41,7068896.29],
        zoom: 6
    })
});

console.log(ol_map);

文件：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 %}

Answer 1

这是我上面评论的详细解释：

在 Webpack 中，每个 module (file) imports and exports code. When the code is transpiled/packaged for the browser, each of those modules is enclosed into an closure，确保内部代码不会泄漏到其他模块中。这非常重要，否则您必须始终确保不会意外覆盖其他模块中的变量或函数。

我猜你错误地认为你的顶级模块是不同的，并且东西被导出到浏览器的顶级 (window) 范围。事实并非如此！

浏览器的控制台在主范围内工作，其中您的内部变量 ol_map 未知。当然，该变量在某处，但它在某个函数内部的某个地方（甚至更深，在子子...函数中）。也许你的变量也被 webpack 重命名了（为了使代码占用空间更小），所以即使你在代码中添加调试断点，你可能不会立即识别你的变量（但它就在那里！）。

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

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

OpenLayers：为什么浏览器中的 console.log 可以找到变量

OpenLayers: Why the console.log in browser can find the variable

javascript

gis

openlayers

webpack

webpack-encore