| /node_modules/ | |
| bundle.js |
This example demonstrates how the ol@beta package can be used with Rollup and the Closure Compiler in advanced mode.
Note that the Compiler takes a while to run.
Clone the project.
git clone git@gist.github.com:32a5692bedac5254da24fa3b12072f35.git ol-rollup-closure
Install the project dependencies.
cd ol-rollup-closure
npm install
Create a bundle for the browser.
npm run build
Open index.html to see the result.
open index.html
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Using OpenLayers with Rollup and the Closure Compiler</title> | |
| <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| height: 100%; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="./bundle.js"></script> | |
| </body> | |
| </html> |
| import Map from 'ol/map'; | |
| import View from 'ol/view'; | |
| import TileLayer from 'ol/layer/tile'; | |
| import XYZ from 'ol/source/xyz'; | |
| new Map({ | |
| target: 'map', | |
| layers: [ | |
| new TileLayer({ | |
| source: new XYZ({ | |
| url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' | |
| }) | |
| }) | |
| ], | |
| view: new View({ | |
| center: [0, 0], | |
| zoom: 2 | |
| }) | |
| }); |
| { | |
| "name": "ol-rollup-closure", | |
| "version": "1.0.0", | |
| "description": "Example using OpenLayers with Rollup and Closure Compiler", | |
| "scripts": { | |
| "build": "rollup --config rollup.config.js" | |
| }, | |
| "devDependencies": { | |
| "rollup": "^0.51.3", | |
| "rollup-plugin-closure-compiler-js": "^1.0.5", | |
| "rollup-plugin-commonjs": "^8.2.6", | |
| "rollup-plugin-node-resolve": "^3.0.0" | |
| }, | |
| "dependencies": { | |
| "ol": "^4.1.0" | |
| } | |
| } |
| import closure from 'rollup-plugin-closure-compiler-js'; | |
| import common from 'rollup-plugin-commonjs'; | |
| import node from 'rollup-plugin-node-resolve'; | |
| module.exports = { | |
| input: 'main.js', | |
| output: [ | |
| {file: 'bundle.js', format: 'es'} | |
| ], | |
| plugins: [ | |
| node(), | |
| common(), | |
| closure({ | |
| compilationLevel: 'ADVANCED', | |
| warningLevel: 'QUIET' | |
| }) | |
| ] | |
| }; |