From 6f8e7e93183e8745745dabb389d42d0e9d0edefb Mon Sep 17 00:00:00 2001 From: Zach Mullen Date: Tue, 7 Aug 2018 11:55:35 -0400 Subject: [PATCH 1/7] Build two bundles: full and lean The lean bundle does not include any of the runtime packages (currently just hammerjs and d3) and assumes they'll be available at runtime in the global namespace. --- external.config.js | 63 ---------------------- package-lock.json | 15 ++++-- package.json | 3 +- webpack-lean.config.js | 23 +++++++++ webpack.base.config.js | 98 +++++++++++++++++++++++++++++++++++ webpack.config.js | 115 ++--------------------------------------- 6 files changed, 140 insertions(+), 177 deletions(-) delete mode 100644 external.config.js create mode 100644 webpack-lean.config.js create mode 100644 webpack.base.config.js diff --git a/external.config.js b/external.config.js deleted file mode 100644 index 828b0de2c8..0000000000 --- a/external.config.js +++ /dev/null @@ -1,63 +0,0 @@ -var path = require('path'); -var UglifyJsPlugin = require('uglifyjs-webpack-plugin'); - -module.exports = { - /* webpack 4 - mode: 'production', - */ - performance: {hints: false}, - cache: true, - context: path.join(__dirname, 'src'), - entry: { - 'geo.ext': './vendor.js', - 'geo.ext.min': './vendor.js' - }, - output: { - path: path.join(__dirname, 'dist', 'built'), - publicPath: 'dist/built', - filename: '[name].js' - }, - resolve: { - alias: { - d3: 'd3/d3.js', - hammerjs: 'hammerjs/hammer.js' - } - }, - /* webpack 3 */ - plugins: [ - new UglifyJsPlugin({ - include: /\.min\.js$/, - parallel: true, - uglifyOptions: { - compress: true, - comments: /@(license|copyright)/ - }, - sourceMap: true - }) - ], - /* end webpack 3 */ - /* webpack 4 - optimization: { - minimizer: [ - new UglifyJsPlugin({ - include: /\.min\.js$/, - parallel: true, - uglifyOptions: { - compress: true, - comments: /@(license|copyright)/ - }, - sourceMap: true - }) - ] - }, - */ - module: { - rules: [{ - test: require.resolve('d3'), - use: ['expose-loader?d3'] - }, { - test: require.resolve('hammerjs'), - use: ['expose-loader?hammerjs'] - }] - } -}; diff --git a/package-lock.json b/package-lock.json index 94b5ad5c3f..8fee02f4b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "geojs", - "version": "0.16.0", + "version": "0.17.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4229,7 +4229,7 @@ }, "event-stream": { "version": "0.5.3", - "resolved": "http://registry.npmjs.org/event-stream/-/event-stream-0.5.3.tgz", + "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-0.5.3.tgz", "integrity": "sha1-t3uTCfcQet3+q2PwwOr9jbC9jBw=", "dev": true, "requires": { @@ -10268,7 +10268,7 @@ }, "onetime": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "dev": true }, @@ -15633,6 +15633,15 @@ } } }, + "webpack-merge": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.4.tgz", + "integrity": "sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==", + "dev": true, + "requires": { + "lodash": "4.17.10" + } + }, "webpack-serve": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/webpack-serve/-/webpack-serve-1.0.4.tgz", diff --git a/package.json b/package.json index addd44d2df..427ec5fc9f 100644 --- a/package.json +++ b/package.json @@ -90,11 +90,12 @@ "url-loader": "^1.0.1", "webpack": "^3.12.0", "webpack-cli": "^2.1.3", + "webpack-merge": "^4.1.4", "webpack-serve": "^1.0.2", "xmlbuilder": "^10.0.0" }, "scripts": { - "build": "webpack --config webpack.config.js && webpack --config external.config.js", + "build": "webpack --config webpack.config.js && webpack --config webpack-lean.config.js", "build-examples": "node examples/build.js && webpack --config webpack-examples.config.js", "build-website-examples": "node examples/build-website.js && webpack --config webpack-website-examples.config.js", "build-tutorials": "node tutorials/build.js && webpack --config webpack-tutorials.config.js", diff --git a/webpack-lean.config.js b/webpack-lean.config.js new file mode 100644 index 0000000000..2ad9eff612 --- /dev/null +++ b/webpack-lean.config.js @@ -0,0 +1,23 @@ +// The lean build does not include any of the third-party runtime dependencies, rather +// it assume they are in the global namespace at runtime. +var config = require('./webpack.base.config'); +var merge = require('webpack-merge'); + +module.exports = merge(config, { + entry: { + 'geo.lean': './index.js', + 'geo.lean.min': './index.js' + }, + externals: { + d3: 'd3', + hammerjs: { + root: 'Hammer', + commonjs: 'hammerjs', + commonjs2: 'hammerjs', + amd: 'hammerjs', + // Since GeoJS's libraryTarget is "umd", defining this (undocumented) external library type + // will allow Webpack to create a better error message if a "hammerjs" import fails + umd: 'hammerjs' + } + } +}); diff --git a/webpack.base.config.js b/webpack.base.config.js new file mode 100644 index 0000000000..e7a3e464b0 --- /dev/null +++ b/webpack.base.config.js @@ -0,0 +1,98 @@ +var path = require('path'); +var webpack = require('webpack'); +var exec = require('child_process').execSync; +var UglifyJsPlugin = require('uglifyjs-webpack-plugin'); +var sha = ''; + +if (!exec) { + console.warn('Node 0.12 or greater is required for detecting the git hash.'); +} + +try { + sha = exec('git rev-parse HEAD', {cwd: __dirname}).toString().trim(); +} catch (e) { + console.warn('Could not determine git hash.'); +} + +var define_plugin = new webpack.DefinePlugin({ + GEO_SHA: JSON.stringify(sha), + GEO_VERSION: JSON.stringify(require('./package.json').version) +}); + +module.exports = { + /* webpack 4 + mode: 'production', + */ + performance: {hints: false}, + cache: true, + devtool: 'source-map', + context: path.join(__dirname, 'src'), + output: { + path: path.join(__dirname, 'dist', 'built'), + publicPath: 'dist/built', + filename: '[name].js', + library: 'geo', + libraryTarget: 'umd' + }, + resolve: { + alias: { + jquery: 'jquery/dist/jquery', + proj4: 'proj4/lib', + vgl: 'vgl/vgl.js', + d3: 'd3/d3.js', + hammerjs: 'hammerjs/hammer.js', + mousetrap: 'mousetrap/mousetrap.js' + } + }, + plugins: [ + /* webpack 3 */ + new UglifyJsPlugin({ + include: /\.min\.js$/, + parallel: true, + uglifyOptions: { + compress: true, + comments: /@(license|copyright)/ + }, + sourceMap: true + }), + /* end webpack 3 */ + define_plugin + ], + /* webpack 4 + optimization: { + minimizer: [ + new UglifyJsPlugin({ + include: /\.min\.js$/, + parallel: true, + uglifyOptions: { + compress: true, + comments: /@(license|copyright)/ + }, + sourceMap: true + }) + ] + }, + */ + module: { + rules: [{ + test: /\.styl$/, + use: [ + 'style-loader', + 'css-loader', + 'stylus-loader' + ] + }, { + test: /\.css$/, + use: [ + 'style-loader', + 'css-loader' + ] + }, { + test: /vgl\.js$/, + use: [ + 'expose-loader?vgl', + 'imports-loader?mat4=gl-mat4,vec4=gl-vec4,vec3=gl-vec3,$=jquery' + ] + }] + } +}; diff --git a/webpack.config.js b/webpack.config.js index 7e3f519c61..74b13349c6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,114 +1,9 @@ -var path = require('path'); -var webpack = require('webpack'); -var exec = require('child_process').execSync; -var UglifyJsPlugin = require('uglifyjs-webpack-plugin'); -var sha = ''; +var config = require('./webpack.base.config'); +var merge = require('webpack-merge'); -if (!exec) { - console.warn('Node 0.12 or greater is required for detecting the git hash.'); -} - -try { - sha = exec('git rev-parse HEAD', {cwd: __dirname}).toString().trim(); -} catch (e) { - console.warn('Could not determine git hash.'); -} - -var define_plugin = new webpack.DefinePlugin({ - GEO_SHA: JSON.stringify(sha), - GEO_VERSION: JSON.stringify(require('./package.json').version) -}); - -module.exports = { - /* webpack 4 - mode: 'production', - */ - performance: {hints: false}, - cache: true, - devtool: 'source-map', - context: path.join(__dirname, 'src'), +module.exports = merge(config, { entry: { - geo: './index.js', + 'geo': './index.js', 'geo.min': './index.js' - }, - output: { - path: path.join(__dirname, 'dist', 'built'), - publicPath: 'dist/built', - filename: '[name].js', - library: 'geo', - libraryTarget: 'umd' - }, - resolve: { - alias: { - jquery: 'jquery/dist/jquery', - proj4: 'proj4/lib', - vgl: 'vgl/vgl.js', - d3: 'd3/d3.js', - hammerjs: 'hammerjs/hammer.js', - mousetrap: 'mousetrap/mousetrap.js' - } - }, - externals: { - d3: 'd3', - hammerjs: { - root: 'Hammer', - commonjs: 'hammerjs', - commonjs2: 'hammerjs', - amd: 'hammerjs', - // Since GeoJS's libraryTarget is "umd", defining this (undocumented) external library type - // will allow Webpack to create a better error message if a "hammerjs" import fails - umd: 'hammerjs' - } - }, - plugins: [ - /* webpack 3 */ - new UglifyJsPlugin({ - include: /\.min\.js$/, - parallel: true, - uglifyOptions: { - compress: true, - comments: /@(license|copyright)/ - }, - sourceMap: true - }), - /* end webpack 3 */ - define_plugin - ], - /* webpack 4 - optimization: { - minimizer: [ - new UglifyJsPlugin({ - include: /\.min\.js$/, - parallel: true, - uglifyOptions: { - compress: true, - comments: /@(license|copyright)/ - }, - sourceMap: true - }) - ] - }, - */ - module: { - rules: [{ - test: /\.styl$/, - use: [ - 'style-loader', - 'css-loader', - 'stylus-loader' - ] - }, { - test: /\.css$/, - use: [ - 'style-loader', - 'css-loader' - ] - }, { - test: /vgl\.js$/, - use: [ - 'expose-loader?vgl', - 'imports-loader?mat4=gl-mat4,vec4=gl-vec4,vec3=gl-vec3,$=jquery' - ] - }] } -}; +}); From 4a305334a7c0fc44c7b446c125fad78443cb5477 Mon Sep 17 00:00:00 2001 From: Zach Mullen Date: Thu, 9 Aug 2018 14:39:13 -0400 Subject: [PATCH 2/7] Fix examples for new build process --- .travis.yml | 4 ++-- webpack-examples.config.js | 3 --- webpack-lean.config.js | 2 +- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/.travis.yml b/.travis.yml index 7677f3b00a..d1a52908dd 100644 --- a/.travis.yml +++ b/.travis.yml @@ -97,8 +97,8 @@ deploy: file: - dist/built/geo.js - dist/built/geo.min.js - - dist/built/geo.ext.js - - dist/built/geo.ext.min.js + - dist/built/geo.lean.js + - dist/built/geo.lean.min.js skip-cleanup: true on: tags: true diff --git a/webpack-examples.config.js b/webpack-examples.config.js index a037bceaca..36f34c1abf 100644 --- a/webpack-examples.config.js +++ b/webpack-examples.config.js @@ -3,7 +3,6 @@ const StringReplacePlugin = require('string-replace-webpack-plugin'); var path = require('path'); var base = require('./webpack.config'); -var external = require('./external.config'); var rules = base.module.rules.concat([{ test: /\.pug$/, @@ -39,8 +38,6 @@ var rules = base.module.rules.concat([{ })] }]); -rules = rules.concat(external.module.rules); - var plugins = base.plugins; plugins.push(new StringReplacePlugin()); diff --git a/webpack-lean.config.js b/webpack-lean.config.js index 2ad9eff612..eb8ea96eef 100644 --- a/webpack-lean.config.js +++ b/webpack-lean.config.js @@ -1,5 +1,5 @@ // The lean build does not include any of the third-party runtime dependencies, rather -// it assume they are in the global namespace at runtime. +// it assumes they are in the global namespace at runtime. var config = require('./webpack.base.config'); var merge = require('webpack-merge'); From 67426b5f38fff6c5e3065db6ce2cbf6992b645ef Mon Sep 17 00:00:00 2001 From: Zach Mullen Date: Thu, 9 Aug 2018 14:52:12 -0400 Subject: [PATCH 3/7] Make tutorials use new bundle setup --- package.json | 2 +- tutorials/basic/index.pug | 5 ----- tutorials/common/tutorials.js | 1 - tutorials/editor3/index.pug | 2 -- tutorials/video_transport/index.pug | 1 - webpack-tutorials.config.js | 3 --- 6 files changed, 1 insertion(+), 13 deletions(-) diff --git a/package.json b/package.json index 427ec5fc9f..81494fc97d 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "website": "cd website && npx hexo server", "setup-website": "cd website && npm install", "build-website": "npm run build && cp -a dist/built/. website/source/built && npm run build-website-examples && npm run build-website-tutorials && npm run docs && cd dist && find data \\( -name tiles -o -name base-images -o -name '*-hash-stamp' -o -name '*.tgz' \\) -prune -o \\( -print0 \\) | cpio -pmdL0 ../website/source && cp -ar apidocs/. ../website/source/apidocs && cd ../website && npm install && rm -f db.json && npx hexo generate", - "prepublishOnly": "webpack --config webpack.config.js && webpack --config external.config.js && cp dist/built/*.js ." + "prepublishOnly": "webpack --config webpack.config.js && webpack --config webpack-lean.config.js && cp dist/built/*.js ." }, "keywords": [ "map", diff --git a/tutorials/basic/index.pug b/tutorials/basic/index.pug index 0c03716266..0d34d78a2c 100644 --- a/tutorials/basic/index.pug +++ b/tutorials/basic/index.pug @@ -9,7 +9,6 @@ block mainTutorial - @@ -18,10 +17,6 @@ block mainTutorial :markdown-it - The second script, ``geo.ext.min.js``, is optional. It adds support - for svg elements and touch interaction. It needs to be added before - ``geo.min.js``. - Some CSS will make our map fill the page: +codeblock('css', 2). diff --git a/tutorials/common/tutorials.js b/tutorials/common/tutorials.js index 00b3aa355f..04b676d891 100644 --- a/tutorials/common/tutorials.js +++ b/tutorials/common/tutorials.js @@ -15,7 +15,6 @@ var processBlockInfo = { /* We could also load from the CDN: * https://cdnjs.cloudflare.com/ajax/libs/geojs/0.12.2/geo.min.js * or the non-minified versions to make debug easier. */ - ' \n' + ' \n' + '\n' + '\n' + diff --git a/tutorials/editor3/index.pug b/tutorials/editor3/index.pug index c8ea2d2702..ca15035e3f 100644 --- a/tutorials/editor3/index.pug +++ b/tutorials/editor3/index.pug @@ -13,12 +13,10 @@ block mainTutorial - diff --git a/tutorials/video_transport/index.pug b/tutorials/video_transport/index.pug index 3b4e51c7ad..d06e9d3159 100644 --- a/tutorials/video_transport/index.pug +++ b/tutorials/video_transport/index.pug @@ -11,7 +11,6 @@ block mainTutorial - diff --git a/webpack-tutorials.config.js b/webpack-tutorials.config.js index 383cc1ace1..6394abcc02 100644 --- a/webpack-tutorials.config.js +++ b/webpack-tutorials.config.js @@ -3,7 +3,6 @@ const StringReplacePlugin = require('string-replace-webpack-plugin'); var path = require('path'); var base = require('./webpack.config'); -var external = require('./external.config'); var rules = base.module.rules.concat([{ test: /\.pug$/, @@ -33,8 +32,6 @@ var rules = base.module.rules.concat([{ }) }]); -rules = rules.concat(external.module.rules); - var plugins = base.plugins; plugins.push(new StringReplacePlugin()); From 33e145d9ae0fee833c30701abc6d15bb0b90a6c4 Mon Sep 17 00:00:00 2001 From: Zach Mullen Date: Thu, 9 Aug 2018 15:54:32 -0400 Subject: [PATCH 4/7] Changelog and website changes --- CHANGELOG.md | 1 + website/source/download/index.html | 73 +++++++++++++++--------------- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b6f3388337..2df1415ac9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,7 @@ - Remove bower support (#856) - Switch to webpack v3 (#854) - Removed needless function wrappers (#870) +- Changed build process: optional dependencies are now included in the bundle by default (#890) ## Version 0.16.0 diff --git a/website/source/download/index.html b/website/source/download/index.html index 78efbacc6b..94eaf4ed5b 100644 --- a/website/source/download/index.html +++ b/website/source/download/index.html @@ -1,37 +1,36 @@ ---- -title: Download ---- - -
-
-
-
-

Download

-

Released builds

-

Each released versions of GeoJS can be found on Github.

-

Use GeoJS from CDN

-

GeoJS is hosted on cdnjs. To use GeoJS, include the following in your HTML head:

-{% codeblock lang:html line_number:false %} - -{% endcodeblock %} -

This will include minified version of GeoJS and its dependencies on your page. The integrity hash will make sure the integrity of the file.

-

The geo.ext.min.js contains d3 and Hammer which are peer dependencies of geojs, include this script if you don't have the libraries available at global scope.

-

Install from NPM

-
-
-{% codeblock lang:shell line_number:false %} -npm install geojs -{% endcodeblock %} -
-
-

This will install source code and built version GeoJS and it's optional dependencies to node_modules.

-

Use GeoJS with ES6 import

-

Once GeoJS is installed with npm, you could include GeoJS using as an ES6 module.

-{% codeblock lang:javascript line_number:false %} -import geo from 'geojs'; -{% endcodeblock %} -

Then you could use GeoJS with the variable geo in your script.

-
-
-
-
\ No newline at end of file +--- +title: Download +--- + +
+
+
+
+

Download

+

Released builds

+

Each released versions of GeoJS can be found on Github.

+

Use GeoJS from CDN

+

GeoJS is hosted on cdnjs. To use GeoJS, include the following in your HTML head:

+{% codeblock lang:html line_number:false %} + +{% endcodeblock %} +

This will include minified version of GeoJS and its dependencies on your page. The integrity hash will make sure the integrity of the file.

+

Install from NPM

+
+
+{% codeblock lang:shell line_number:false %} +npm install geojs +{% endcodeblock %} +
+
+

This will install source code and built version GeoJS and it's optional dependencies to node_modules.

+

Use GeoJS with ES6 import

+

Once GeoJS is installed with npm, you could include GeoJS using as an ES6 module.

+{% codeblock lang:javascript line_number:false %} +import geo from 'geojs'; +{% endcodeblock %} +

Then you could use GeoJS with the variable geo in your script.

+
+
+
+
From 85bfc9f3e5e2d050d8e39b1742763f579b2a5691 Mon Sep 17 00:00:00 2001 From: Zach Mullen Date: Thu, 9 Aug 2018 16:04:30 -0400 Subject: [PATCH 5/7] Update RST docs to reflect new bundle structure --- docs/quickstart.rst | 9 +++++---- docs/users.rst | 17 +++++------------ 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/docs/quickstart.rst b/docs/quickstart.rst index 403a64ba05..0a8d515f18 100644 --- a/docs/quickstart.rst +++ b/docs/quickstart.rst @@ -61,9 +61,11 @@ is needed. :: npm install npm run build -Compiled javascript libraries will be named ``geo.min.js`` and ``geo.ext.min.js`` in ``dist/built``. -The first file contains geojs and vgl bundled together with a number of dependent libraries. -The second file contains d3. The bundled libraries are minified, but source maps are provided +The compiled javascript libraries will be named ``geo.min.js`` and ``geo.lean.min.js`` in ``dist/built``. +The first file contains geojs including all optional dependencies. The second file is a version of +geojs without any of the third party dependencies such as d3 and Hammer; if you want to use the lean +bundle but need any of these dependencies, you must include them first in your page and expose them in +global scope under their standard names. The bundled libraries are minified, but source maps are provided. .. _quick-start-guide: @@ -76,7 +78,6 @@ and creating a basic full map using the `osmLayer` class. .. code-block:: html -