openlayers使用control时显示 ol.control.defaults is not a function

 今天复制官网代码时用上了controls，ol的js包引用没错，但是之后浏览器报错，具体情况如图

const view = new ol.View({
    center: [328627.563458, 5921296.662223],
    zoom: 8,
    extent: [-572513.341856, 5211017.966314, 916327.095083, 6636950.728974],
  });
  
  new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM(),
      }),
    ],
    keyboardEventTarget: document,
    target: 'map',
    view: view,
    controls: ol.control.defaults().extend([new ol.control.ZoomSlider()]),
  });

之后在外网看到一个回答，简单来说是openlayers更新之后，较新版本的openlayers中的这个代码块被移动到自己的模块中用来解决循环依赖关系，解决办法是引用defaults之前需要再加一个defaults，就能正常运行了

改之前

 controls: ol.control.defaults().extend([new ol.control.ZoomSlider()]),
  });

改之后

 controls: ol.control.defaults.defaults().extend([new ol.control.ZoomSlider()]),
  });

具体解决情况看此链接，需要一点儿魔法：https://stackoverflow.com/questions/73698664/ol-controls-default-not-a-function-in-openlayers-7-1