New webpack-based build system (#6)

* Introducing WebPack build stack * core examples build implemented * browser build enabled * compile in css too * cleaning from old closure code * removing skydome.jpg * introducing import-based build * more clean global namespace export * geographiclib and proj4 as external libraries * README update * Fixing all demos * README update
melowntech · Apr 5, 2017 · 721a765 · 721a765
1 parent 6b711a6
commit 721a765
Show file tree

Hide file tree

Showing 82 changed files with 739 additions and 9,582 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presents": ["es2015"],
+  "plugins": ["babel-plugin-add-module-exports"]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,29 @@
+{
+  "ecmaFeatures": {
+    "globalReturn": true,
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "parser": "babel-eslint",
+  "plugins": [],
+  "rules": {
+    // ... lots of lots of rules here
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,8 @@
 build/*
+node_modules
+build/*
+build/*.js
+build/*.css
 .project
+*.un~
+*.sw*
diff --git a/README.md b/README.md
@@ -2,3 +2,31 @@
 
 ## Documentation
 * [Melown API](https://github.com/Melown/melown-js/wiki/Melown-API)
+
+## Install
+
+```
+npm install
+```
+
+(`yarn install` will be ready soon)
+
+## Build (constantly)
+
+```
+node_modules/.bin/webpack --watch
+```
+
+## Build compressed version
+
+```
+NODE_ENV=production node_modules/.bin/webpack
+```
+
+## Run dev server
+
+```
+node_modules/.bin/webpack-dev-server  --inline
+```
+
+And go to http://localhost:8080/demos/core/basic/
diff --git a/demos/browser/basic/demo.js b/demos/browser/basic/demo.js
@@ -1,6 +1,5 @@
-
-function startDemo() {
-    var browser = Melown.MapBrowser("map-div", {
-        map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json"
+(function startDemo() {
+    var browser = Melown.MapBrowser('map-div', {
+        map: 'https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json'
     });
-}
+})();
diff --git a/demos/browser/basic/index.html b/demos/browser/basic/index.html
@@ -2,13 +2,14 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/flights/demo.js b/demos/browser/flights/demo.js
@@ -1,9 +1,8 @@
-
 var browser = null;
 var ui = null;
 var list = null;
 
-function startDemo() {
+(function startDemo() {
     browser = Melown.MapBrowser("map-div", {
         map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json",
         position : [ "obj", 1683559, 6604129, "float", 0, -13, -58, 0, 3764, 90 ]
@@ -19,7 +18,7 @@ function startDemo() {
 
     list = panel.getElement("panel");
     list.on("change", onFlyToNewDestination);
-}
+})();
 
 function onFlyToNewDestination() {
     switch (list.getElement().elements["destination"].value) {

diff --git a/demos/browser/flights/index.html b/demos/browser/flights/index.html
@@ -2,9 +2,9 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 
 
     <style>
@@ -22,8 +22,9 @@
 
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/flights/skydome.jpg b/demos/browser/flights/skydome.jpg
diff --git a/demos/browser/hit-surface/demo.js b/demos/browser/hit-surface/demo.js
@@ -1,9 +1,8 @@
-
 var browser = null;
 var pointTexture = null;
 var clickCoords = null;
 
-function startDemo() {
+(function startDemo() {
     browser = Melown.MapBrowser("map-div", {
         map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json",
         position : [ "obj", 1683559, 6604129, "float", 0, -13, -58, 0, 964, 90 ]
@@ -16,7 +15,7 @@ function startDemo() {
     browser.getMapElement().on('mousedown', onMouseDown);
 
     loadTexture();
-}
+})();
 
 function loadTexture() {
     //load icon used for displaing hit point

diff --git a/demos/browser/hit-surface/index.html b/demos/browser/hit-surface/index.html
@@ -2,13 +2,14 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/hit-surface/skydome.jpg b/demos/browser/hit-surface/skydome.jpg
diff --git a/demos/browser/lines-and-images/demo.js b/demos/browser/lines-and-images/demo.js
@@ -1,15 +1,14 @@
-
 var browser = null;
 
-function startDemo() {
+(function startDemo() {
     browser = Melown.MapBrowser("map-div", {
         map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json",
         position : [ "obj", 1683559, 6604129, "float", 0, -13, -58, 0, 1764, 90 ]
     });
 
     browser.on("map-loaded", onMapLoaded);
     loadImage();
-}
+})();
 
 var demoTexture = null;
 
@@ -65,4 +64,4 @@ function onCustomRender() {
 }
 
 
-
+
diff --git a/demos/browser/lines-and-images/index.html b/demos/browser/lines-and-images/index.html
@@ -2,13 +2,14 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/lines-and-images/skydome.jpg b/demos/browser/lines-and-images/skydome.jpg
diff --git a/demos/browser/meshes-hit-test/demo.js b/demos/browser/meshes-hit-test/demo.js
@@ -1,11 +1,10 @@
-
 var browser = null;
 var woodTexture = null;
 var pointTexture = null;
 var cubeMesh = null;
 var clickCoords = null;
 
-function startDemo() {
+(function startDemo() {
     browser = Melown.MapBrowser("map-div", {
         map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json",
         position : [ "obj", 1683559, 6604129, "float", 0, -13, -58, 0, 964, 90 ]
@@ -21,11 +20,11 @@ function startDemo() {
 
     //create cube mesh        
     createCube();    
-}
+})();
 
 function loadTextures() {
     //load texture used for cubes    
-    var woodImage = Melown.Http.imageFactory("./wood.png",
+    var woodImage = Melown.Http.imageFactory("/demos/images/wood.png",
         (function(){
             woodTexture = browser.getRenderer().createTexture({ "source": woodImage });
         }).bind(this)

diff --git a/demos/browser/meshes-hit-test/index.html b/demos/browser/meshes-hit-test/index.html
@@ -2,13 +2,14 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/meshes-hit-test/skydome.jpg b/demos/browser/meshes-hit-test/skydome.jpg
diff --git a/demos/browser/meshes/demo.js b/demos/browser/meshes/demo.js
@@ -1,9 +1,8 @@
-
 var browser = null;
 var woodTexture = null;
 var cubeMesh = null;
 
-function startDemo() {
+(function startDemo() {
     browser = Melown.MapBrowser("map-div", {
         map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json",
         position : [ "obj", 1683559, 6604129, "float", 0, -13, -58, 0, 964, 90 ]
@@ -17,11 +16,11 @@ function startDemo() {
 
     //create cube mesh        
     createCube();    
-}
+})();
 
 function loadTexture() {
     //load texture used for cubes    
-    var woodImage = Melown.Http.imageFactory("./wood.png",
+    var woodImage = Melown.Http.imageFactory("/demos/images/wood.png",
         (function(){
             woodTexture = browser.getRenderer().createTexture({ "source": woodImage });
         }).bind(this)

diff --git a/demos/browser/meshes/index.html b/demos/browser/meshes/index.html
@@ -2,13 +2,14 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/meshes/skydome.jpg b/demos/browser/meshes/skydome.jpg
diff --git a/demos/browser/view-switch/demo.js b/demos/browser/view-switch/demo.js
@@ -1,9 +1,8 @@
-
 var browser = null;
 var ui = null;
 var button = null;
 
-function startDemo() {
+(function startDemo() {
     browser = Melown.MapBrowser("map-div", {
         map : "https://demo.test.mlwn.se/public-maps/grand-ev/mapConfig.json"
     });
@@ -16,7 +15,7 @@ function startDemo() {
 
     button = panel.getElement("switch");
     button.on("change", onSwitchView);
-}
+})();
 
 function onSwitchView() {
     if (button.getElement().checked) {

diff --git a/demos/browser/view-switch/index.html b/demos/browser/view-switch/index.html
@@ -2,9 +2,9 @@
 <head>
     <title>Vadstena Map Viewer</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-    <link rel="stylesheet" type="text/css" href="../../../build/melown-browser.css" />
-    <script type="text/javascript" src="../../../build/melown-browser.js"></script>
-    <script type="text/javascript" src="./demo.js"></script>
+    <link rel="stylesheet" type="text/css" href="/build/melown-browser.css" />
+    <script src="/webpack-dev-server.js"></script>
+    <script type="text/javascript" src="/build/melown-browser.js"></script>
 
 
     <style>
@@ -22,8 +22,9 @@
 
 </head>
 
-<body style = "padding: 0; margin: 0;" onload="startDemo()">
+<body style = "padding: 0; margin: 0;">
     <div id="map-div" style="width:100%; height:100%;">
     </div>
+    <script type="text/javascript" src="demo.js"></script>
 </body>
-</html>
+</html>
diff --git a/demos/browser/view-switch/skydome.jpg b/demos/browser/view-switch/skydome.jpg