OpenLayers 6 和 RollupJS 配方

Question

我正在尝试使用 RollupJS 创建 OpenLayers 6 的生产版本。我想生成一个最小化的 ES6 模块，我可以从中在我的代码中导入类...我不想将我的代码与核心 OL 类混合。据我所知，默认的 OpenLayers 捆绑器、Parcel 和其他选项无法解决这个问题。

使用 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

此问题是由 TypeScript 编译器的 class 继承代码引起的，该编译器用于将 OpenLayers 转换为 ES5。一种选择是使用

配置汇总

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。

OpenLayers 6 和 RollupJS 配方

OpenLayers 6 & RollupJS recipe

rollupjs

openlayers-6