feat(tooling): Fix bad builds, add split package builds

Author: Bernie Zang

.eslintignore

@@ -0,0 +1 @@
+**/dist/**

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "description": "The Cisco Spark for React library allows developers to easily incorporate Spark functionality into an application.",
   "scripts": {
-    "build": "NODE_ENV=production babel-node --presets=stage-1,es2015 scripts/build-all.js",
+    "build": "npm run build:packages && npm run build:bundle",
+    "build:packages": "NODE_ENV=production babel-node --presets=stage-1,es2015 scripts/build-packages.js",
     "build:package": "NODE_ENV=production babel-node --presets=stage-1,es2015 scripts/build-package.js",
+    "build:bundle": "NODE_ENV=production babel-node --presets=stage-1,es2015 scripts/build-bundle.js",
     "test": "npm run static-analysis && npm run jest",
     "jest": "jest --config=jest.config.json",
     "static-analysis": "npm run eslint && npm run stylelint",

scripts/build-bundle.js

@@ -0,0 +1,8 @@
+import buildPackage from './build-package';
+import path from 'path';
+
+// Run buildPackage on all of our packages
+buildPackage(`react-ciscospark`, path.resolve(__dirname, `..`))
+  .catch((error) => {
+    throw new Error(error);
+  });

scripts/build-package.js

@@ -8,18 +8,19 @@ const stat = denodeify(fs.stat);
 /**
  * Builds a specific package with Webpack
  * @param  {string} pkgName
+ * @param  {string} pkgPath
  * @returns {undefined}
  */
-export default function buildPackage(pkgName) {
-  const pkgPath = path.resolve(__dirname, `..`, `packages`, `node_modules`, `@ciscospark`, pkgName);
+export default function buildPackage(pkgName, pkgPath) {
+  pkgPath = pkgPath || path.resolve(__dirname, `..`, `packages`, `node_modules`, `@ciscospark`, pkgName);
   return stat(pkgPath)
     .then((statObj) => {
       // If the folder doesn't exist do nothing
       if (!statObj.isDirectory()) {
         return false;
       }
       console.log(`Building ${pkgName} ...`.cyan);
-      const webpackConfigPath = path.resolve(__dirname, `webpack`, `webpack.prod.babel.js`);
+      const webpackConfigPath = path.resolve(__dirname, `webpack`, `webpack.package.babel.js`);
       // Delete dist folder
       return exec(`rimraf ${path.resolve(pkgPath, `dist`)}`)
         .then(() =>

scripts/build-all.js renamed to scripts/build-packages.js

@@ -8,7 +8,7 @@ import 'colors';
 
 let executionOptions = {
   dryRun: false,
-  verbose: false
+  verbose: true
 };
 
 /**
@@ -40,13 +40,9 @@ export function exec(command, options = {}) {
 
   const title = options.title || command;
 
-  function output(data, type) { // eslint-disable-line require-jsdoc
-    return logWithPrefix(`[${title}] ${type}:`, data);
-  }
-
   return proc.progress(({stdout, stderr}) => {
-    stdout.on(`data`, (data) => output(data, `stdout`));
-    stderr.on(`data`, (data) => output(data, `stderr`));
+    stdout.on(`data`, (data) => console.log(data));
+    stderr.on(`data`, (data) => console.log(data));
   })
   .then((result) => {
     logWithPrefix(`[${title}]`, `Complete`.cyan);

scripts/utils/exec.js

@@ -4,9 +4,10 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import InlineEnviromentVariablesPlugin from 'inline-environment-variables-webpack-plugin';
 
 import cssnext from 'postcss-cssnext';
+import postcssReporter from 'postcss-reporter';
 
 export default (options) => ({
-  context: options.context || path.resolve(__dirname, `..`, `..`, `src`),
+  context: options.context || path.resolve(process.cwd(), `src`),
   entry: options.entry,
   output: Object.assign({
     filename: `bundle.js`,
@@ -25,8 +26,8 @@ export default (options) => ({
     new webpack.LoaderOptionsPlugin({
       options: {
         postcss: [
-          cssnext
-        ].concat(options.postcss)
+          cssnext, postcssReporter
+        ]
       }
     })
   ].concat(options.plugins),

scripts/webpack/webpack.base.babel.js

@@ -1,7 +1,11 @@
+/**
+ * In development we assume that the code generated is going to be consumed by
+ * webpack dev server and we are bundling into a single js file.
+ */
+
 import path from 'path';
 import webpackConfigBase from './webpack.base.babel';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import postcssReporter from 'postcss-reporter';
 
 
 const plugins = [
@@ -11,10 +15,9 @@ const plugins = [
 ];
 
 export default webpackConfigBase({
-  entry: `./index.js`,
+  entry: `./demo.js`,
   plugins,
   devtools: `cheap-module-eval-source-map`,
-  postcss: [postcssReporter],
   babelInclude: [
     path.resolve(__dirname, `packages`, `node_modules`)
   ]

scripts/webpack/webpack.dev.babel.js

@@ -0,0 +1,38 @@
+/**
+ * Webpack config for building individual packages for distribution
+ */
+
+import path from 'path';
+import webpack from 'webpack';
+
+import webpackBaseConfig from './webpack.base.babel';
+
+const plugins = [
+  // Setup uglify to compress and suppress warnings in logs
+  new webpack.optimize.UglifyJsPlugin({
+    sourceMap: true,
+    compress: {
+      warnings: false
+    }
+  }),
+  // Remove locales from moment, may need to add back in future
+  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+];
+
+export default webpackBaseConfig({
+  entry: `./index.js`,
+  output: {
+    filename: `bundle.js`,
+    path: path.resolve(process.cwd(), `dist`),
+    sourceMapFilename: `[file].map`
+  },
+  // Full source maps for production debugging
+  devtool: `source-map`,
+  plugins,
+  // Reset env values we don't want to see in bundles
+  env: {
+    CISCOSPARK_ACCESS_TOKEN: ``,
+    TO_PERSON_EMAIL: ``,
+    TO_PERSON_ID: ``
+  }
+});