#42 - Supporting browser and node.js builds using cross-fetch.

Author: aviklai

dist/georaster.browser.bundle.js

@@ -3,6 +3,9 @@
   "version": "0.6.2",
   "description": "Wrapper around Georeferenced Rasters like GeoTIFF, NetCDF, JPG, and PNG that provides a standard interface",
   "main": "dist/georaster.bundle.min.js",
+  "browser": {
+    "./dist/georaster.bundle.min.js": "./dist/georaster.browser.bundle.min.js"
+  },
   "scripts": {
     "browserify": "browserify src/index.js -o georaster.browserify.js",
     "eslint": "node ./node_modules/eslint/bin/eslint.js src",
@@ -11,8 +14,8 @@
     "test-all": "npm run test-dev && npm run test-prod",
     "test-dev": "npm run dev && GEORASTER_TEST_BUNDLE_NAME='georaster.bundle.js' node ./node_modules/.bin/mocha --reporter spec",
     "test-prod": "npm run build && GEORASTER_TEST_BUNDLE_NAME='georaster.bundle.min.js' node ./node_modules/.bin/mocha --reporter spec",
-    "dev": "webpack --mode development",
-    "build": "webpack --mode production"
+    "dev": "webpack --mode development --target node && webpack --mode development --target web",
+    "build": "webpack --mode production --target node && webpack --mode production --target web"
   },
   "repository": {
     "type": "git",
@@ -34,9 +37,9 @@
   },
   "homepage": "https://github.com/GeoTIFF/georaster#readme",
   "dependencies": {
+    "cross-fetch": "^3.0.4",
     "georaster-to-canvas": "0.2.0",
     "geotiff": "^1.0.0-beta.6",
-    "node-fetch": "^2.3.0",
     "path": "^0.12.7",
     "simple-xml-dom": "^1.0.0",
     "underscore": "^1.8.3",

dist/georaster.browser.bundle.min.js

@@ -2,22 +2,13 @@
 /* global Blob */
 /* global URL */
 
-import nodeFetch from 'node-fetch';
-
+import fetch from 'cross-fetch';
 import Worker from './worker.js';
-
 import parseData from './parseData.js';
 import {unflatten} from './utils.js';
-
 import {fromUrl, fromUrls} from 'geotiff/src/main.js';
 import toCanvas from 'georaster-to-canvas';
 
-const inBrowser = typeof window === 'object';
-
-if (!inBrowser && typeof global === 'object') {
-  global.fetch = nodeFetch;
-}
-
 function urlExists(url) {
   try {
     return fetch(url, {method: 'HEAD'})

dist/georaster.bundle.js

@@ -1,20 +1,20 @@
 const path = require('path');
 
 module.exports = (env, argv) => {
-
-  console.log('mode:', argv.mode)
-
-  const { mode } = argv
-
+  console.log('mode:', argv.mode);
+  console.log('target:', argv.target);
+  const {mode, target} = argv;
+  const targetFileNamePart = target === 'node' ? '' : '.browser';
   return {
     entry: './src/index.js',
     mode,
+    target: target,
     output: {
       path: path.resolve(__dirname, 'dist'),
-      filename: mode === 'production' ? 'georaster.bundle.min.js' : 'georaster.bundle.js',
+      filename: mode === 'production' ? `georaster${targetFileNamePart}.bundle.min.js` : `georaster${targetFileNamePart}.bundle.js`,
       globalObject: 'typeof self !== \'undefined\' ? self : this',
       library: 'GeoRaster',
-      libraryTarget: 'umd'
+      libraryTarget: 'umd',
     },
     module: {
       rules: [
@@ -24,30 +24,30 @@ module.exports = (env, argv) => {
           use: {
             loader: 'babel-loader',
             options: {
-              presets: ['env']
-            }
-          }
+              presets: ['env'],
+            },
+          },
         },
         {
           test: /worker\.js$/,
           use: {
             loader: 'worker-loader',
             options: {
               inline: true,
-              fallback: false
-            }
+              fallback: false,
+            },
           },
-        }
-      ]
+        },
+      ],
     },
     node: {
       // prevents this error Module not found: Error: Can't resolve 'fs' in '/home/ubuntu/georaster/node_modules/geotiff/dist'
-      fs: "empty"
+      fs: 'empty',
     },
     externals: {
       // we do this so we can manually polyfill fetch as a global variable,
       // activating geotiff.js' makeFetchSource function when using fromUrl
-      "node-fetch": "node-fetch"
-    }
-  }
-}
+      'node-fetch': 'node-fetch',
+    },
+  };
+};