时间戳

首页 > 解决方案 > OpenLayers 6 和 RollupJS 配方

rollupjs - OpenLayers 6 和 RollupJS 配方

问题描述

我正在尝试使用 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 来解决这个问题。

标签： rollupjsopenlayers-6

解决方案

该问题是由 TypeScript 编译器的类继承代码引起的，该编译器用于将 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。

推荐阅读