Remove support for building mapbox-gl with webpack and other non-brow…

…serify bundlers (#3235) * remove support for building mapbox-gl with webpack * clarify usage of mapbox-gl with other module bundlers * remove webpack config example
mapbox · Oct 3, 2016 · c1f8613 · c1f8613
1 parent d6c51ab
commit c1f8613
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 134 deletions.
diff --git a/README.md b/README.md
@@ -13,10 +13,12 @@ It is part of the [Mapbox GL ecosystem](https://github.com/mapbox/mapbox-gl) whi
 
 [<img width="981" alt="Mapbox GL JS gallery" src="https://cloud.githubusercontent.com/assets/281306/14547142/a3c98294-025f-11e6-92f4-d6b0f50c8e89.png">](https://www.mapbox.com/gallery/)
 
-## Using Mapbox GL JS with a `<script>` tag
+## Using Mapbox vector tiles and styles
 
 To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on http://mapbox.com, you must [create an account](https://www.mapbox.com/studio/signup/) and then [obtain an access token](https://www.mapbox.com/studio/account/tokens/). You may learn more about access tokens [here](https://www.mapbox.com/help/define-access-token/).
 
+## Using Mapbox GL JS with a `<script>` tag
+
 ```html
 <!DOCTYPE html>
 <html>
@@ -41,8 +43,6 @@ To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on htt
 
 ## Using Mapbox GL JS with [Browserify](http://browserify.org/)
 
-To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on http://mapbox.com, you must [create an account](https://www.mapbox.com/studio/signup/) and then [obtain an access token](https://www.mapbox.com/studio/account/tokens/). You may learn more about access tokens [here](https://www.mapbox.com/help/define-access-token/).
-
 Install the [`mapbox-gl` npm package](https://www.npmjs.com/package/mapbox-gl)
 
 ```bash
@@ -60,40 +60,18 @@ var map = new mapboxgl.Map({
 });
 ```
 
-## Using Mapbox GL JS with [Webpack](https://webpack.github.io/)
-
-To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on http://mapbox.com, you must [create an account](https://www.mapbox.com/studio/signup/) and then [obtain an access token](https://www.mapbox.com/studio/account/tokens/). You may learn more about access tokens [here](https://www.mapbox.com/help/define-access-token/).
-
-Install the [`mapbox-gl` npm package](https://www.npmjs.com/package/mapbox-gl)
-and the required loaders.
-
-```bash
-npm install --save mapbox-gl
-npm install --save transform-loader
-npm install --save json-loader
-npm install --save webworkify-webpack
-```
-
-Add the [required additional options from webpack.config.example.js](webpack.config.example.js)
-to your webpack configuration.
+## Using Mapbox GL JS with other module systems
 
-Instantiate `mapboxgl.Map`
+Since our build system depends on Browserify, to use Mapbox GL with any other module bundlers like [Webpack](https://webpack.github.io/), [SystemJS](https://github.com/systemjs/systemjs), you have to require the distribution build instead of the package entry point:
 
 ```js
-var mapboxgl = require('mapbox-gl');
-mapboxgl.accessToken = '<your access token here>';
-var map = new mapboxgl.Map({
-    container: '<your HTML element id>',
-    style: 'mapbox://styles/mapbox/streets-v9'
-});
+var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
 ```
 
-### Using import
-
-If you're using the ES6 module system, you can import `mapboxgl` like so:
+If you're using the ES6 module system (e.g. with [Rollup](https://github.com/rollup/rollup) as a bundler), you can import `mapboxgl` like so:
 
 ```js
-import mapboxgl from 'mapbox-gl';
+import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
 ```
 
 ## Third Party Projects

diff --git a/package.json b/package.json
@@ -75,9 +75,7 @@
     "unist-util-visit": "1.1.0",
     "vinyl": "1.1.1",
     "vinyl-fs": "2.4.3",
-    "watchify": "^3.7.0",
-    "webpack": "^1.13.1",
-    "webworkify-webpack": "^1.1.3"
+    "watchify": "^3.7.0"
   },
   "browserify": {
     "transform": [
@@ -108,7 +106,7 @@
     "open-changed-examples": "git diff --name-only mb-pages HEAD -- docs/_posts/examples/*.html | awk '{print \"http://127.0.0.1:4000/mapbox-gl-js/example/\" substr($0,33,length($0)-37)}' | xargs open",
     "test": "run-s lint test-unit",
     "test-suite": "run-s test-render test-query",
-    "test-unit": "tap --reporter dot --no-coverage test/js test/build/webpack.test.js",
+    "test-unit": "tap --reporter dot --no-coverage test/js",
     "test-render": "node test/render.test.js",
     "test-query": "node test/query.test.js",
     "test-cov": "nyc --reporter=text-summary --cache run-s test-unit test-render test-query"

diff --git a/test/build/webpack.test.js b/test/build/webpack.test.js
diff --git a/test/fixtures/webpack-entry.js b/test/fixtures/webpack-entry.js
diff --git a/webpack.config.example.js b/webpack.config.example.js