Merge 82203fa into bdfa76d

visgl · Sep 4, 2019 · a53bdca · a53bdca
2 parents bdfa76d + 82203fa
commit a53bdca
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 16 deletions.
diff --git a/docs/developer-guide/get-started.md b/docs/developer-guide/get-started.md
@@ -43,12 +43,14 @@ const data = await parse(fetch('data.csv'));
 
 ## Building
 
-loaders.gl is designed to leverage modern JavaScript (ES2018) and to optimize functionality and performance on evergreen browsers.
-
-However, the default distribution is completely transpiled to ES5 so using loaders.gl with older or "slower moving" browsers such as IE11 and Edge is possible if polyfills are added.
+You can use your bundler of choice such as webpack or rollup. See the [`get-started-...`](https://github.com/uber-web/loaders.gl/tree/master/examples) examples for minimal working examples of how to bundle loaders.gl.
 
 ## Supporting Older Browsers
 
+loaders.gl is designed to leverage modern JavaScript (ES2018) and to optimize functionality and performance on evergreen browsers.
+
+However, the default distribution is completely transpiled to ES5 so using loaders.gl with older or "slower moving" browsers such as IE11 and Edge is possible, assuming that the appropriate polyfills are installed.
+
 To build on Edge and IE11, `TextEncoder` and `TextDecoder` must be polyfilled. There are several polyfills available on `npm`, but you can also use the polyfills provided by loaders.gl:
 
 ```bash

diff --git a/test/apps/rollup-test/src/main.js → examples/get-started-rollup/app.js b/test/apps/rollup-test/src/main.js → examples/get-started-rollup/app.js
@@ -7,7 +7,7 @@ const OBJ_URL =
 
 async function main() {
   const data = await parse(fetch(OBJ_URL), OBJLoader);
-  console.log(data); // eslint-disable-line
+  console.log(JSON.stringify(data, null, 2)); // eslint-disable-line
 }
 
 main();
diff --git a/test/apps/rollup-test/index.html → examples/get-started-rollup/index.html b/test/apps/rollup-test/index.html → examples/get-started-rollup/index.html
@@ -2,4 +2,4 @@
 <script type="module">
   import './dist/bundle.js';
 </script>
-
+<body>Open browser console to see results</body>
diff --git a/test/apps/rollup-test/package.json → examples/get-started-rollup/package.json b/test/apps/rollup-test/package.json → examples/get-started-rollup/package.json
@@ -1,17 +1,23 @@
 {
-  "devDependencies": {
-    "rollup": "^1.16.2",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.1.0",
-    "serve": "^11.0.2"
+  "license": "MIT",
+  "description": "Minimal working example of using loaders.gl with rollup.",
+  "contributors": [
+    "@nshen"
+  ],
+  "scripts": {
+    "start": "yarn build; serve",
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "serve": "serve public"
   },
   "dependencies": {
     "@loaders.gl/core": "^1.2.2",
     "@loaders.gl/obj": "^1.2.2"
   },
-  "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "start": "serve public"
+  "devDependencies": {
+    "rollup": "^1.16.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.1.0",
+    "serve": "^11.0.2"
   }
-}
+}
diff --git a/test/apps/rollup-test/rollup.config.js → examples/get-started-rollup/rollup.config.js b/test/apps/rollup-test/rollup.config.js → examples/get-started-rollup/rollup.config.js
@@ -2,7 +2,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 
 export default {
-  input: 'src/main.js',
+  input: 'app.js',
   output: {
     file: 'dist/bundle.js',
     format: 'iife', // immediately-invoked function expression — suitable for <script> tags

diff --git a/examples/get-started-webpack/app.js b/examples/get-started-webpack/app.js
@@ -0,0 +1,13 @@
+/* global fetch */
+import {parse} from '@loaders.gl/core';
+import {OBJLoader} from '@loaders.gl/obj';
+
+const OBJ_URL =
+  'https://raw.githubusercontent.com/uber-web/loaders.gl/master/modules/obj/test/data/cube.obj';
+
+async function main() {
+  const data = await parse(fetch(OBJ_URL), OBJLoader);
+  console.log(JSON.stringify(data, null, 2)); // eslint-disable-line
+}
+
+main();
diff --git a/examples/get-started-webpack/index.html b/examples/get-started-webpack/index.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<script type="module">
+  import './dist/bundle.js';
+</script>
+<body>Open browser console to see results</body>
diff --git a/examples/get-started-webpack/package.json b/examples/get-started-webpack/package.json
@@ -0,0 +1,16 @@
+{
+  "license": "MIT",
+  "description": "Minimal example of using loaders.gl with webpack.",
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open -d"
+  },
+  "dependencies": {
+    "@loaders.gl/core": "^1.2.2",
+    "@loaders.gl/obj": "^1.2.2"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.3.0",
+    "webpack-dev-server": "^3.1.1"
+  }
+}
diff --git a/examples/get-started-webpack/webpack.config.js b/examples/get-started-webpack/webpack.config.js
@@ -0,0 +1,13 @@
+const {resolve} = require('path');
+
+module.exports = {
+  mode: 'development',
+
+  entry: {
+    app: resolve('./app.js')
+  },
+
+  node: {
+    fs: 'empty'
+  }
+};