How to replace CDN import with ES6 import from NPM packages?

Question

I am trying to replace this:

<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js" integrity="sha256-KJI74PS1qv3+hue+yyIWK/l8TxvS9u4WX7QDrtHkHOo=" crossorigin="anonymous"></script>

<!-- ol-ext -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script>

With import directives:

import * as proj from 'ol/proj'
import * as projProj4 from 'ol/proj/proj4'
import * as geom from 'ol/geom'
import * as layer from 'ol/layer'
import * as format from 'ol/format'
import * as source from 'ol/source'
import * as style from 'ol/style'
import proj4 from 'proj4'
import Placemark from 'ol-ext/overlay/Placemark'
// import 'ol-ext/dist/ol-ext.css'

window.ol = {
  proj: proj,
  geom: geom,
  layer: layer,
  format: format,
  source: source,
  style: style,
  Overlay: {}
}
window.ol.Overlay.Placemark = Placemark
window.ol.proj.proj4 = projProj4
window.proj4 = proj4

Unfortunately it does not work and it is yet very cumbersome. I cannot use do:

import 'ol'
import 'ol-ext'
import 'proj4'

Is there a simple way to do this?

Answer 1

Go into node_modules and find pro4j open up the code and check what is exported. If there's a class exported than you can do import ThatClass from [nodeModuleFolderName] . If there are just lots of functions exported you can for example import them all at once with import * as Whatever from [nodeModuleFolderName] .