Hot fix to prevent mapbox-gl from being bundled and get demo up and running

- Change configuration to use rollup for bundles and wepback for demo
- Move rollup configs into multiple files
- Remove mapbox-gl import and reference TypeScript definitions instead

Author: Peter Hegman

build-configs/rollup.es.config.js

@@ -0,0 +1,30 @@
+import vue from 'rollup-plugin-vue'
+import commonjs from 'rollup-plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import resolve from 'rollup-plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
+
+export default {
+  input: 'src/wrapper.ts',
+  output: {
+    file: 'dist/vue-mapbox-gl.esm.js',
+    format: 'es',
+    name: 'Mapbox',
+    exports: 'named',
+    globals: {
+      vue: 'Vue',
+      'mapbox-gl': 'mapboxgl',
+    },
+  },
+  plugins: [
+    resolve(),
+    commonjs(),
+    vue({
+      css: true,
+      compileTemplate: true,
+    }),
+    typescript({ clean: true }),
+    terser(),
+  ],
+  external: ['vue', 'mapbox-gl'],
+}

build-configs/rollup.iife.config.js

@@ -0,0 +1,35 @@
+import vue from 'rollup-plugin-vue'
+import replace from 'rollup-plugin-replace'
+import commonjs from 'rollup-plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import resolve from 'rollup-plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
+
+export default {
+  input: 'src/wrapper.ts',
+  output: {
+    file: 'dist/vue-mapbox-gl.min.js',
+    format: 'iife',
+    name: 'Mapbox',
+    exports: 'named',
+    globals: {
+      vue: 'Vue',
+      'mapbox-gl': 'mapboxgl',
+    },
+  },
+  plugins: [
+    resolve(),
+    commonjs(),
+    vue({
+      css: true,
+      compileTemplate: true,
+    }),
+    typescript({ clean: true }),
+    terser(),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.VUE_ENV': JSON.stringify('browser'),
+    }),
+  ],
+  external: ['vue', 'mapbox-gl'],
+}

build-configs/rollup.umd.config.js

@@ -0,0 +1,30 @@
+import vue from 'rollup-plugin-vue'
+import commonjs from 'rollup-plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+import resolve from 'rollup-plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
+
+export default {
+  input: 'src/wrapper.ts',
+  output: {
+    file: 'dist/vue-mapbox-gl.umd.js',
+    format: 'umd',
+    name: 'Mapbox',
+    exports: 'named',
+    globals: {
+      vue: 'Vue',
+      'mapbox-gl': 'mapboxgl',
+    },
+  },
+  plugins: [
+    resolve(),
+    commonjs(),
+    vue({
+      css: true,
+      compileTemplate: true,
+    }),
+    typescript({ clean: true }),
+    terser(),
+  ],
+  external: ['vue', 'mapbox-gl'],
+}

build-configs/webpack.demo.config.js

@@ -0,0 +1,54 @@
+const path = require('path')
+const webpack = require('webpack')
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: {
+    index: path.resolve(__dirname, '../src/demo.ts'),
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: 'demo.min.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['vue-style-loader', 'css-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js', '.vue', '.json'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+    },
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, '../src/index.html'),
+    }),
+    new webpack.ProvidePlugin({
+      mapboxgl: 'mapbox-gl',
+    }),
+    new webpack.DefinePlugin({
+      'process.env': {
+        ACCESS_TOKEN: JSON.stringify(process.env.ACCESS_TOKEN),
+      },
+    }),
+  ],
+}

package.json

@@ -27,36 +27,40 @@
     "@typescript-eslint/parser": "^1.13.0",
     "@vue/eslint-config-prettier": "^5.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
+    "css-loader": "^3.2.0",
     "eslint": "^6.1.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.2.3",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.3",
     "mapbox-gl": "^1.3.0",
     "prettier": "1.18.2",
     "pretty-quick": "^1.11.1",
     "rimraf": "^2.6.3",
     "rollup": "^1.19.2",
     "rollup-plugin-commonjs": "^10.0.2",
-    "rollup-plugin-generate-html-template": "^1.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-typescript2": "^0.22.1",
     "rollup-plugin-vue": "^5.0.1",
+    "ts-loader": "^6.0.4",
     "typescript": "^3.5.3",
     "vue": "^2.6.10",
     "vue-class-component": "^7.1.0",
+    "vue-loader": "^15.7.1",
     "vue-property-decorator": "^8.2.1",
-    "vue-template-compiler": "^2.6.10"
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.7"
   },
   "scripts": {
     "build": "rimraf dist & yarn build:umd & yarn build:es & yarn build:unpkg & yarn build:demo",
-    "build:umd": "rollup --config rollup.config.js --format umd --file dist/vue-mapbox-gl.umd.js --environment BUILD:prod,FORMAT:umd",
-    "build:es": "rollup --config rollup.config.js --format es --file dist/vue-mapbox-gl.esm.js --environment BUILD:prod,FORMAT:es",
-    "build:unpkg": "rollup --config rollup.config.js --format iife --file dist/vue-mapbox-gl.min.js --environment BUILD:prod,FORMAT:iife",
-    "build:demo": "rollup --config rollup.config.js --format iife --file dist/demo.min.js --environment BUILD:demo,FORMAT:iife",
-    "serve": "rimraf dist & rollup --config rollup.config.js --format iife --file dist/demo.min.js --environment BUILD:dev,FORMAT:iife --watch",
+    "build:umd": "rollup --config build-configs/rollup.umd.config.js",
+    "build:es": "rollup --config build-configs/rollup.es.config.js",
+    "build:unpkg": "rollup --config build-configs/rollup.iife.config.js",
+    "build:demo": "webpack --config build-configs/webpack.demo.config.js --mode production",
     "lint": "./node_modules/.bin/eslint src/**/*.{vue,ts}"
   },
   "dependencies": {},

rollup.config.js

@@ -1,6 +1,6 @@
 <template>
   <mapbox
-    :access-token="process.env.ACCESS_TOKEN"
+    :access-token="accessToken"
     :map-options="{
       style: 'mapbox://styles/mapbox/light-v9',
       center: [-96, 37.8],
@@ -34,6 +34,7 @@ import { Point } from 'geojson'
 import mapboxgl from 'mapbox-gl'
 import Mapbox from './Mapbox.vue'
 import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
 import PopupContent from './PopupContent.vue'
 // @ts-ignore TypeScript definitions for mapbox-gl-draw not yet available
 import MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'
@@ -43,6 +44,8 @@ import { Map, MapLayerMouseEvent, GeolocateControl } from 'mapbox-gl'
   components: { Mapbox },
 })
 export default class Demo extends Vue {
+  @Prop({ required: true }) readonly accessToken: string
+
   initalized(map: Map): void {
     console.log('Map Initalized')
 
@@ -136,7 +139,7 @@ export default class Demo extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 #map {
   width: 100%;
   height: 500px;

src/Demo.vue

@@ -9,20 +9,14 @@
 </template>
 
 <script lang="ts">
+declare global {
+  const mapboxgl: typeof mapboxgl
+}
+
 import Vue from 'vue'
 import Component from 'vue-class-component'
 import { Prop, Emit } from 'vue-property-decorator'
 
-import {
-  Map,
-  EventData,
-  MapEventType,
-  MapboxOptions,
-  GeolocateControl,
-  FullscreenControl,
-  MapLayerEventType,
-} from 'mapbox-gl'
-import mapboxgl from 'mapbox-gl'
 import ScaleControlOptions from './interfaces/scale-control-options.interface'
 import AttributionControl from './interfaces/attribution-control-options.interface'
 import GeolocateControlOptions from './interfaces/geolocate-control-options.interface'
@@ -32,7 +26,7 @@ import FullscreenControlOptions from './interfaces/navigation-control-options.in
 @Component
 export default class Mapbox extends Vue {
   @Prop({ required: true }) readonly accessToken: string
-  @Prop({ required: true }) readonly mapOptions: MapboxOptions
+  @Prop({ required: true }) readonly mapOptions: mapboxgl.MapboxOptions
   @Prop({
     default: () => {
       return {
@@ -88,7 +82,7 @@ export default class Mapbox extends Vue {
   })
   readonly attributionControl!: AttributionControl
 
-  private map!: Map
+  private map!: mapboxgl.Map
 
   mounted(): void {
     // Initialze Map
@@ -106,7 +100,7 @@ export default class Mapbox extends Vue {
   }
 
   @Emit()
-  mapInit(): Map {
+  mapInit(): mapboxgl.Map {
     mapboxgl.accessToken = this.accessToken
 
     // Add container to options object
@@ -120,7 +114,7 @@ export default class Mapbox extends Vue {
     return map
   }
 
-  registerMapEvents(map: Map): void {
+  registerMapEvents(map: mapboxgl.Map): void {
     const availableEvents: string[] = [
       'error',
       'load',
@@ -198,7 +192,7 @@ export default class Mapbox extends Vue {
             availableEventsWithLayerSupport.indexOf(parsedEventType) > -1
           ) {
             map.on(
-              parsedEventType as keyof MapLayerEventType,
+              parsedEventType as keyof mapboxgl.MapLayerEventType,
               layerId,
               event => {
                 this.$emit(eventType, map, event)
@@ -214,7 +208,7 @@ export default class Mapbox extends Vue {
     }
   }
 
-  addControls(map: Map): void {
+  addControls(map: mapboxgl.Map): void {
     // Nav Control
     if (this.navControl.show) {
       const nav = new mapboxgl.NavigationControl(this.navControl.options)

src/Mapbox.vue

@@ -2,5 +2,5 @@ import Vue from 'vue'
 import Demo from './Demo.vue'
 
 new Vue({
-  render: h => h(Demo),
+  render: h => h(Demo, { props: { accessToken: process.env.ACCESS_TOKEN } }),
 }).$mount('#app')