-
Notifications
You must be signed in to change notification settings - Fork 222
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Build plottable.min.js with webpack (#3318)
Use webpack to build plottable.min.js, removing old grunt code and opening the door for more enhancements later (sourcemaps, dev logging that gets wiped in prod, removing comments) Fixes #3315
- Loading branch information
Showing
8 changed files
with
159 additions
and
469 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,117 +1,12 @@ | ||
| var path = require("path"); | ||
| var webpack = require("webpack"); | ||
| var WriteFilePlugin = require("write-file-webpack-plugin"); | ||
| var packageJson = require("./package.json"); | ||
|
|
||
| var LICENSE_HEADER = | ||
| `Plottable ${packageJson.version} (https://github.com/palantir/plottable) | ||
| Copyright 2014-2017 Palantir Technologies | ||
| Licensed under MIT (https://github.com/palantir/plottable/blob/master/LICENSE)`; | ||
| const buildConfig = require("./webpackConfig/build.js"); | ||
| const testConfig = require("./webpackConfig/test.js"); | ||
|
|
||
| /** | ||
| * Build plottable.js and tests/test by default (e.g. for webpack-dev-server). Both of these | ||
| * files included in <script> tags for tests. | ||
| * TODO we include Plottable twice this way right now; improve testing/devserver setup to only need one. | ||
| */ | ||
| module.exports = [ | ||
| /** | ||
| * Builds test.js from sources in /build/test. Requirements: | ||
| * | ||
| * Loads for side-effect - loading the file immediately invokes many global functions | ||
| * such as describe and it(). | ||
| * | ||
| * Look to test/tests.html for the context of how it's used. | ||
| */ | ||
| { | ||
| devtool: "source-map", | ||
| devServer: { | ||
| compress: true, | ||
| port: 9999, | ||
| inline: false | ||
| }, | ||
| entry: "./build/test/index.js", | ||
| output: { | ||
| filename: "test/tests.js" | ||
| }, | ||
| externals: { | ||
| "d3": "d3", | ||
| "mocha": "mocha", | ||
| "chai": "chai" | ||
| }, | ||
| plugins: [ | ||
| // Resolve require.context calls containing TestSelector to recursively search the directory | ||
| // for files matching the /Tests.js$/ regex. we use .js files because webpack runs on compiled | ||
| // .js files. | ||
| // see https://github.com/webpack/webpack/issues/2783 for info on how this works | ||
| new webpack.ContextReplacementPlugin(/TestSelector/, ".", true, /Tests.js$/), | ||
| new webpack.DefinePlugin({ | ||
| "__VERSION__": JSON.stringify(packageJson.version) | ||
| }) | ||
| ] | ||
| }, | ||
|
|
||
| /** | ||
| * Builds plottable.js from sources in /build/src. Requirements: | ||
| * | ||
| * Be ready for consumption by bower, a script tag, or requireJS. | ||
| * should specify d3 as an external dependency. | ||
| * | ||
| * Example bower usage: | ||
| * | ||
| * User runs `bower install plottable --save` in their directory. | ||
| * Their bower_components gets plottable and d3. They then add the two | ||
| * files in the right order through script tags, or plug it into requireJS, | ||
| * and reference Plottable globally. | ||
| * | ||
| * Example script tag usage: | ||
| * | ||
| * User adds two script tags to their html page: | ||
| * | ||
| * <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"></script> | ||
| * <script src="//unpkg.com/plottable/plottable.js"></script> | ||
| * | ||
| * And then references Plottable globally. | ||
| * | ||
| * Example RequireJS usage: | ||
| * | ||
| * User configures their requireJS to point to Plottable, e.g. | ||
| * | ||
| * require.config( { | ||
| * paths: { | ||
| * d3: "https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min", | ||
| * plottable: "//unpkg.com/plottable/plottable.js" | ||
| * }, | ||
| * shim: { | ||
| * "plottable": { | ||
| * deps: [ "d3" ] | ||
| * } | ||
| * } | ||
| * } ); | ||
| * | ||
| * User calls define(["plottable"], function (Plottable) { ... }) | ||
| * | ||
| * So there's two ideas: | ||
| * (a) Getting the plottable.js file. This is either from bower or from a web url. | ||
| * (b) Referencing the Plottable object/code. This is either globally or by declaring | ||
| * a dependency on a module named "plottable" (both in AMD and CommonJS). | ||
| */ | ||
| { | ||
| entry: "./build/src/index.js", | ||
| output: { | ||
| filename: "plottable.js", | ||
| // adds the UMD header to allow export to AMD, commonJS, or global | ||
| libraryTarget: "umd", | ||
| // the name of the AMD/commonJS/global | ||
| library: "Plottable" | ||
| }, | ||
| externals: { | ||
| // don't bundle d3 but instead it request it externally | ||
| "d3": "d3" | ||
| }, | ||
| plugins: [ | ||
| new webpack.BannerPlugin({ | ||
| banner: LICENSE_HEADER, | ||
| entryOnly: true | ||
| }), | ||
| new webpack.DefinePlugin({ | ||
| "__VERSION__": JSON.stringify(packageJson.version) | ||
| }), | ||
| new WriteFilePlugin() | ||
| ] | ||
| } | ||
| testConfig, | ||
| buildConfig | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| const webpack = require("webpack"); | ||
|
|
||
| const packageJson = require("../package.json"); | ||
|
|
||
| const LICENSE_HEADER = | ||
| `Plottable ${packageJson.version} (https://github.com/palantir/plottable) | ||
| Copyright 2014-2017 Palantir Technologies | ||
| Licensed under MIT (https://github.com/palantir/plottable/blob/master/LICENSE)`; | ||
|
|
||
| /** | ||
| * Builds plottable.js from sources in /build/src. Requirements: | ||
| * | ||
| * Be ready for consumption by bower, a script tag, or requireJS. | ||
| * should specify d3 as an external dependency. | ||
| * | ||
| * Example bower usage: | ||
| * | ||
| * User runs `bower install plottable --save` in their directory. | ||
| * Their bower_components gets plottable and d3. They then add the two | ||
| * files in the right order through script tags, or plug it into requireJS, | ||
| * and reference Plottable globally. | ||
| * | ||
| * Example script tag usage: | ||
| * | ||
| * User adds two script tags to their html page: | ||
| * | ||
| * <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"></script> | ||
| * <script src="//unpkg.com/plottable/plottable.js"></script> | ||
| * | ||
| * And then references Plottable globally. | ||
| * | ||
| * Example RequireJS usage: | ||
| * | ||
| * User configures their requireJS to point to Plottable, e.g. | ||
| * | ||
| * require.config( { | ||
| * paths: { | ||
| * d3: "https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min", | ||
| * plottable: "//unpkg.com/plottable/plottable.js" | ||
| * }, | ||
| * shim: { | ||
| * "plottable": { | ||
| * deps: [ "d3" ] | ||
| * } | ||
| * } | ||
| * } ); | ||
| * | ||
| * User calls define(["plottable"], function (Plottable) { ... }) | ||
| * | ||
| * So there's two ideas: | ||
| * (a) Getting the plottable.js file. This is either from bower or from a web url. | ||
| * (b) Referencing the Plottable object/code. This is either globally or by declaring | ||
| * a dependency on a module named "plottable" (both in AMD and CommonJS). | ||
| */ | ||
| module.exports = { | ||
| entry: "./build/src/index.js", | ||
| output: { | ||
| filename: "plottable.js", | ||
| // adds the UMD header to allow export to AMD, commonJS, or global | ||
| libraryTarget: "umd", | ||
| // the name of the AMD/commonJS/global | ||
| library: "Plottable" | ||
| }, | ||
| externals: { | ||
| // don't bundle d3 but instead it request it externally | ||
| "d3": "d3" | ||
| }, | ||
| plugins: [ | ||
| new webpack.BannerPlugin({ | ||
| banner: LICENSE_HEADER, | ||
| entryOnly: true | ||
| }), | ||
| new webpack.DefinePlugin({ | ||
| "__VERSION__": JSON.stringify(packageJson.version) | ||
| }) | ||
| ] | ||
| }; |
Oops, something went wrong.
0c2cdadThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Build plottable.min.js with webpack (#3318)
Demo: quicktests | fiddle