using openlayers with browserify

[BasieP]

i always used the pre-compiled version of openlayers due to the fact that the entire closure compiler was way to complicated a way to build a simple app.

Now openlayers 5 is here, so i am rebuilding my 'simple app' (a npm package) to 'the new way of life'

I removed all the local files, did an npm install ol and started with this simple piece of code:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

module.exports = function () {
	var map = new Map({
		layers: [
			new TileLayer({
				visible: false,
				preload: Infinity,
				source: new OSM()
			})
		],
		target: 'map',
		view: new View({
			center: [-6655.5402445057125, 6709968.258934638],
			zoom: 13
		})
	});
};

now as you can see i use module.exports because we use browserify. Since the new openlayers uses the ES6 style import and export functions, we need to use babel to pre-compile our javascript (including dependencies like openlayers) to Ecmascript 5.

I use this buildscript in my package.json

"build": "\"browserify src/js/test.js -t [ babelify --presets [ \"@babel/preset-env\" ] ]",

and i have the necessary dependencies for babel installed.
Still i get this error:

d:\mySimpleProject\node_modules\ol\View.js:4
import {DEFAULT_TILE_SIZE} from './tilegrid/common.js';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I'm sure i'm doing something wrong but i can't get my finger on it. If i goolgle, i only find bugreports on git for other projects... not really helping.

[BasieP]

Webpack !== broserify

…

On Wed, 8 Aug 2018, 11:02 Bart van den Eijnden, ***@***.***> wrote: See: https://www.npmjs.com/package/ol https://github.com/openlayers/ol-webpack — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8497 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ab6pPbhlGx3aE1ybXWaoWp2otceGH4T4ks5uOqkSgaJpZM4VziqX> .

[ahocevar]

You need to use babelify as global transform, i.e. with the -g option instead of -t:

"build": "\"browserify src/js/test.js -g [ babelify --presets [ \"@babel/preset-env\" ] ]",

If that breaks other dependencies, configure babelify with the only option.

[aprehot]

@BasieP Can i get a copy of your repo that you are using for this? im having a similar problem as you and want to deduce it.

[BasieP]

I couldn't get it to work.. I'm in the middle of switching to webpack now..

…

On Wed, 8 Aug 2018, 20:15 Aidan Prehatny, ***@***.***> wrote: Can i get a copy of your repo that you are using for this? im having a similar problem as you and want to deduce it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#8497 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Ab6pPQ_DKxhdaTmXKu01WgWFSsY5kBxCks5uOyqwgaJpZM4VziqX> .

[ahocevar]

I have set up an example repository that shows how to use the ol package with Browserify: https://github.com/openlayers/ol-browserify.

[BasieP]

thanks man 👍
i keep going on my webpack migration, but this sure helps others a lot