Refactor package builder to use webpack, drop module entry points

Will introduce "module" later, but it doesn't work anyway with the relative path imports inside the packages. Rollup couldn't handle the symlinked packages and was duplicating imports.
enigma-io · Jan 25, 2017 · c6a82e7 · c6a82e7
1 parent a31dac6
commit c6a82e7
Show file tree

Hide file tree

Showing 30 changed files with 54 additions and 50 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "stylus": "^0.54.2",
     "stylus-loader": "^2.4.0",
     "uglify-js": "^2.6.2",
+    "verbal-expressions": "^0.3.0",
     "webpack": "^2.2.0",
     "webpack-dev-server": "^2.2.0"
   },

diff --git a/packages/boundless-arrow-key-navigation/package.json b/packages/boundless-arrow-key-navigation/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-arrow-key-navigation",
   "version": "1.0.0-beta.3",
   "description": "A higher-order component for arrow key navigation on a grouping of children.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-async/package.json b/packages/boundless-async/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0-beta.3",
   "description": "A higher-order component for rendering data that isn't ready yet.",
   "author": "Evan Scott <glitterbyte@gmail.com> (http://yaycmyk.com)",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-button/package.json b/packages/boundless-button/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-button",
   "version": "1.0.0-beta.3",
   "description": "A control with \"pressed\" state support.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-checkbox-group/package.json b/packages/boundless-checkbox-group/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-checkbox-group",
   "version": "1.0.0-beta.3",
   "description": "A controller view for managing the aggregate state of multiple, related checkboxes.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-checkbox/package.json b/packages/boundless-checkbox/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-checkbox",
   "version": "1.0.0-beta.3",
   "description": "An accessible checkbox with indeterminate support.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-dialog/package.json b/packages/boundless-dialog/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-dialog",
   "version": "1.0.0-beta.3",
   "description": "A non-blocking, focus-stealing container.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-fitted-text/package.json b/packages/boundless-fitted-text/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-fitted-text",
   "version": "1.0.0-beta.3",
   "description": "Fit given text inside a parent container, obeying implict and explicit constraints.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-image/package.json b/packages/boundless-image/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-image",
   "version": "1.0.0-beta.3",
   "description": "An image block with placeholder support for loading and fallback scenarios.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-input/package.json b/packages/boundless-input/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-input",
   "version": "1.0.0-beta.3",
   "description": "An input control with placeholder emulation for non-supporting platforms.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-modal/package.json b/packages/boundless-modal/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-modal",
   "version": "1.0.0-beta.3",
   "description": "A blocking, focus-stealing container.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-pagination/package.json b/packages/boundless-pagination/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-pagination",
   "version": "1.0.0-beta.3",
   "description": "View and navigate heterogenious content one page at a time.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-popover/package.json b/packages/boundless-popover/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-popover",
   "version": "1.0.0-beta.3",
   "description": "A non-blocking container positioned to a specific anchor element.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-portal/package.json b/packages/boundless-portal/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-portal",
   "version": "1.0.0-beta.3",
   "description": "A higher-order component for the rendering of components outside the normal React tree.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-progress/package.json b/packages/boundless-progress/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-progress",
   "version": "1.0.0-beta.3",
   "description": "An unopinionated progress implementation, allowing for a variety of shapes and effects.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-progressive-disclosure/package.json b/packages/boundless-progressive-disclosure/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-progressive-disclosure",
   "version": "1.0.0-beta.3",
   "description": "Hide content until it's needed, with configurable teasers.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-radio/package.json b/packages/boundless-radio/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-radio",
   "version": "1.0.0-beta.3",
   "description": "An accessible radio form control.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-segmented-control/package.json b/packages/boundless-segmented-control/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-segmented-control",
   "version": "1.0.0-beta.3",
   "description": "A control containing multiple buttons, only one of which can be active at a time.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-tokenized-input/package.json b/packages/boundless-tokenized-input/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-tokenized-input",
   "version": "1.0.0-beta.3",
   "description": "Distill rich entity data matched via typeahead input into simple visual abstractions.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-typeahead/package.json b/packages/boundless-typeahead/package.json
@@ -2,7 +2,6 @@
   "name": "boundless-typeahead",
   "version": "1.0.0-beta.3",
   "description": "Intelligently recommend entities via customizable, fuzzy recognition.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-conformance/package.json b/packages/boundless-utils-conformance/package.json
@@ -3,7 +3,6 @@
   "private": true,
   "version": "1.0.0",
   "description": "Used in testing boundless components for prop passing, etc.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-is-function/package.json b/packages/boundless-utils-is-function/package.json
@@ -3,7 +3,6 @@
   "private": true,
   "version": "1.0.0",
   "description": "Tests for function-ness.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-is-string/package.json b/packages/boundless-utils-is-string/package.json
@@ -3,7 +3,6 @@
   "private": true,
   "version": "1.0.0",
   "description": "Tests for string-ness.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-noop/package.json b/packages/boundless-utils-noop/package.json
@@ -3,7 +3,6 @@
   "private": true,
   "version": "1.0.0",
   "description": "A dummy function with no side effects. Commonly used when mocking interfaces.",
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-object-intersection/package.json b/packages/boundless-utils-object-intersection/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0-beta.3",
   "description": "Returns an intersection of the first argument against the second argument's keys.",
   "private": true,
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-omit-keys/package.json b/packages/boundless-utils-omit-keys/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0-beta.3",
   "description": "Returns a modified version of the supplied object without the given keys.",
   "private": true,
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-transform-property/package.json b/packages/boundless-utils-transform-property/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0-beta.3",
   "description": "Returns the appropriate vendor-prefixed property for use in programmatic transform style manipulation.",
   "private": true,
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-uuid/package.json b/packages/boundless-utils-uuid/package.json
@@ -4,7 +4,6 @@
   "version": "1.0.0",
   "description": "Generates a unique ID. Adds a prefix so it is suitable for use as an HTML ID.",
   "private": true,
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/packages/boundless-utils-web-notification/package.json b/packages/boundless-utils-web-notification/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0-beta.3",
   "description": "Trigger native toasts in supporting browsers.",
   "private": true,
-  "module": "index.js",
   "main": "build/index.js",
   "repository": {
     "type": "git",

diff --git a/scripts/build-packages.js b/scripts/build-packages.js
@@ -1,21 +1,34 @@
 /* eslint-disable no-console */
 /* eslint-disable no-fallthrough */
 
+process.env.BABEL_ENV = 'development';
+
 const fs = require('fs');
 const path = require('path');
 const mkdirp = require('mkdirp');
 const chalk = require('chalk');
 const _ = require('lodash');
-const rollup = require('rollup');
-const uglify = require('rollup-plugin-uglify');
-const baseConfig = require('./rollup.config.js');
 
 _.mixin({'pascalCase': _.flow(_.camelCase, _.upperFirst)});
 
 const base = __dirname + '/../packages/';
 const packages = fs.readdirSync(path.resolve(base)).filter((name) => /^boundless-(?!utils)/.test(name));
 const error = (err) => console.error(chalk.bold.red(err));
 
+const baseExternals = {
+    "react": {
+        amd: "react",
+        commonjs2: "react",
+        root: "React",
+    },
+
+    "react-dom": {
+        amd: "react-dom",
+        commonjs2: "react-dom",
+        root: "ReactDOM",
+    },
+};
+
 const docgen = require('react-docgen');
 const componentReadmeTemplate = `
 THIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.
@@ -140,8 +153,9 @@ require('jsdom').env('', [
 
     packages.forEach((name) => {
         const pascalName = _.pascalCase(name);
-        const entryPath = path.resolve(base + name + '/index.js');
-        const readmePath = path.resolve(base + name + '/README.md');
+        const entryPath = path.resolve(base, name, 'index.js');
+        const jsonPath = path.resolve(base, name, 'package.json');
+        const readmePath = path.resolve(base, name, 'README.md');
 
         const seedDocgen = docgen.parse(fs.readFileSync(entryPath));
 
@@ -175,25 +189,42 @@ require('jsdom').env('', [
             })
         ));
 
-        mkdirp.sync(path.resolve(base + name + '/build'));
+        mkdirp.sync(path.join(base, name, 'build'));
 
-        process.env.BABEL_ENV = 'development';
+        const webpack = require('webpack');
+        const dependencies = Object.keys(require(jsonPath).dependencies || {});
+        const externals = _.merge({}, baseExternals, dependencies.reduce((map, depName) => {
+            return /boundless-utils/.test(depName) || (map[depName] = {commonjs2: depName}), map;
+        }, {}));
 
-        const devRollupInstance = rollup.rollup(_.assign({}, baseConfig, {
+        webpack({
             entry: entryPath,
-            plugins: baseConfig.plugins.concat(
-                uglify({
-                    compress: false,
-                    screwIE8: true,
-                })
-            ),
-        }));
-
-        devRollupInstance.then((bundle) => bundle.write({
-            dest: path.resolve(base + name + '/build/index.js'),
-            exports: 'default',
-            format: 'cjs',
-            sourceMap: 'inline',
-        }), error).then(() => console.log(chalk.bold.green(`Built ${name}.`)), error);
+            devtool: 'inline-source-map',
+            externals: externals,
+            module: {
+                rules: [{
+                    test: /\.jsx?$/,
+                    loader: 'babel-loader',
+                }],
+            },
+            output: {
+                filename: 'index.js',
+                libraryTarget: 'commonjs2',
+                path: path.resolve(base, name, 'build'),
+            },
+            plugins: [
+                new webpack.optimize.UglifyJsPlugin({
+                    comments: false,
+                    compress: true,
+                    sourceMap: true,
+                }),
+            ],
+        }, (err) => {
+            if (err) {
+                return error(err);
+            }
+
+            console.log(chalk.bold.green(`Built ${name}.`));
+        });
     });
 });