OpenLayers 6和RollupJS食谱

Question

我正在尝试使用RollupJS创建OpenLayers 6的生产版本。我想生成一个最小化的ES6模块，我可以从这个模块导入代码中的类……我不想把我的代码和核心的OL类混在一起。据我所见，默认的OpenLayers捆绑包、包裹和其他选项不能管理这一点。

在使用ol-rollup (https://github.com/openlayers/ol-rollup)的OpenLayers-5中，所有这些都工作得很好。但是，如果我更新到OpenLayers-6 & RollupJS <= 1.26.0 (https://github.com/flavour/ol-rollup)，那么我会得到以下错误：

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules\ol\layer\Tile.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules\ol\source\XYZ.js
2:  * @module ol/source/XYZ
3:  */
4: var __extends = (this && this.__extends) || (function () {
                    ^
5:     var extendStatics = function (d, b) {
6:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
node_modules\ol\AssertionError.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence
...and 98 other files

关于这一点，RollupJS网站有以下内容：https://rollupjs.org/guide/en/#error-this-is-undefined https://rollupjs.org/guide/en/#danger-zone

我不知道如何使用options.context或options.moduleContext来修复这个问题。

Answer 1

该问题是由用于将OpenLayers转换为ES5的TypeScript编译器的类继承代码引起的。一种选择是使用以下命令配置rollup

onwarn: function(warning, superOnWarn) {
  if (warning.code === 'THIS_IS_UNDEFINED') {
    return;
  }
  superOnWarn(warning);
}

官方的OpenLayers+Rollup配方(https://github.com/openlayers/ol-rollup)最近已经更新了这一变化。

另一种选择是导入源模块，而不是在应用程序中导入已转换的模块。因此，例如，不是

import Map from 'ol/Map'

你可以

import Map from 'ol/src/Map'

有关此问题的更多信息，请参阅https://github.com/openlayers/openlayers/issues/10245。