How to use the ol-mapbox-style function in ol-mapbox-style

import VectorTileSource from '../src/ol/source/VectorTile.js';
import TileGrid from '../src/ol/tilegrid/TileGrid.js';

import olms from 'ol-mapbox-style';
import {defaultResolutions} from 'ol-mapbox-style/util.js';

const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';

// Match the server resolutions
const maxResolution = 360 / 512;
defaultResolutions.length = 14;
for (let i = 0; i < 14; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

olms('map', 'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key).then(function(map) {

  // Custom tile grid for the EPSG:4326 projection
  const tileGrid = new TileGrid({
    extent: [-180, -90, 180, 90],
    tileSize: 512,
    resolutions: defaultResolutions
  });

  const mapboxStyle = map.get('mapbox-style');

  // Replace the source with a EPSG:4326 projection source for each vector tile layer
  map.getLayers().forEach(function(layer) {
    const mapboxSource = layer.get('mapbox-source');
    if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') {
      const source = layer.getSource();
      layer.setSource(new VectorTileSource({

import 'ol/ol.css';
import olms from 'ol-mapbox-style';

olms('map', 'data/wms.json');

import 'ol/ol.css';
import olms from 'ol-mapbox-style';

const baseUrl = 'https://api.mapbox.com/styles/v1/mapbox/bright-v9';

let key = document.cookie.replace(/(?:(?:^|.*;\s*)mapbox_access_token\s*\=\s*([^;]*).*$)|^.*$/, '$1');
if (!key) {
  key = window.prompt('Enter your Mapbox API access token:');
  document.cookie = 'mapbox_access_token=' + key + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
}

olms('map', baseUrl + '?access_token=' + key);

import apply from 'ol-mapbox-style';

apply('map', 'https://maps.tilehosting.com/styles/topo/style.json?key=ER67WIiPdCQvhgsUjoWK');