Rails webpacker OpenLayers。未捕获的 ReferenceError：未定义 ol。已修复但未解决答案

【问题标题】：Rails webpacker OpenLayers. Uncaught ReferenceError: ol is not defined. Fixed but not solvedRails webpacker OpenLayers。未捕获的 ReferenceError：未定义 ol。已修复但未解决
【发布时间】：2019-12-19 19:44:50
【问题描述】：

完全错误：

layerSwitcherDemo.js:52 Uncaught ReferenceError: ol is not defined
    at Module../app/javascript/packs/layerSwitcherDemo.js (layerSwitcherDemo.js:52)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./app/javascript/packs/layerSwitcherDemo.js @   layerSwitcherDemo.js:52
__webpack_require__ @   bootstrap:19
(anonymous) @   bootstrap:83
(anonymous)

这是从people/show.html.erb 通过<%= javascript_pack_tag 'layerSwitcherDemo' %> 调用的。

如果我使用与map/ol_layer_switcher.html.erb 相同的<%= javascript_pack_tag 'layerSwitcherDemo' %>，则脚本可以正常工作。

// javascript/packs/layerSwitcherDemo.js
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import LayerGroup from 'ol/layer/Group';
import LayerImage from 'ol/layer/Image';
import LayerTile from 'ol/layer/Tile';
import SourceOSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import LayerSwitcher from 'ol-layerswitcher';
import {transformExtent, fromLonLat} from 'ol/proj';

var <a long list>

// the next line is line 52 in the error      
var map = new ol.Map({
    target: 'map',
    layers: [
// rest of the code

我正在尝试慢慢构建以制作 OpenLayers 地图。我将使用与我制作的 LayerSwitcherDemo 不同的东西，以确保它可以加载到 Rails 中。 Layer Switcher 是我修改的一个演示。

只是想比较编译的 layerSwitcherDemo-xx.js 脚本，所有 55k 行都是相同的。 application-xx.js 相同。

现已修复但未解决。正在工作的页面加载了 OpenLayers 的 CDN 版本。作为 Webpack 的新手，我不确定哪个是最好的。我想我携带的代码更少。让 CDN 来做。这将是一个非常容易使用的应用程序。我猜我需要某种等同于import $ from 'jquery'的定义

【问题讨论】：

谢谢@rossta。我错过了正在发生的事情。起初我只是按照你说的做了，但遇到了一个错误，但意识到我有一大堆问题要修复。对于这方面的初学者来说，使用import Map from 'ol/Map' 可能更容易，但后来我有一个阅读import {transformExtent, fromLonLat} from 'ol/proj'; 的抽象可能有帮助。你的博客是我阅读的博客之一。另一个评论。如此启动并运行。
@rossta。有没有办法使用我原来的符号？我想我可以回去撤消更改并删除导入，看看会发生什么。好的，我做到了，显然ol 必须在某个地方定义。我是否必须定义每个 ol/ 才能使其工作？我将不得不更好地了解 webpacker 以及 OpenLayers。也许还有 JavaScript！
@rossta。我刚刚浏览了您的rossta.net/blog/from-sprockets-to-webpack.html，它似乎回答了我必须定义每个ol/xx 的问题。但是你的帖子太让我头疼了，但我应该再试一次。
根据主要入口点为我的答案添加了一个替代导入作为参考：github.com/openlayers/openlayers/blob/…

标签： javascript ruby-on-rails webpack openlayers-3

【解决方案1】：

在您的示例中，您调用的是ol.Map，但您已经导入了Map。按如下方式编辑您的 Webpack JS：

import Map from 'ol/Map'

// ... other imports

const map = new Map({   // replaces ol.Map
    target: 'map',
    layers: [
// ...

或者，根据main entry point in the the openlayer module，以下将适用于一些导入。

import * as ol from 'ol';

new ol.Map() // but not ol.LayerGroup, for example ...

【讨论】：

【解决方案2】：

包含在发布中。我通过使用 OpenLayers CDN 进行修复，而不是依赖 webpack 加载 ol。以下是不起作用的页面的资源。 ol（openlayers）在那里。

【讨论】：