Webpack example and test

nfriedly · nfriedly · commit 2fe397e3449c · 2017-02-08T11:05:14.000-05:00
diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,4 @@ doc/
 examples/static/watson-speech.js
 examples/static/bower_components/
 examples/node_modules/
+examples/static/webpack-bundle.js
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ doc/
 *-auth.json
 .env
 dist/*.min.js
+examples/static/webpack-bundle.js
diff --git a/examples/package.json b/examples/package.json
@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "Examples showing the IBM Watson Speech Javascript SDK in action.",
   "scripts": {
-    "start": "node server.js"
+    "start": "npm run build-webpack && npm run server",
+    "server": "node server.js",
+    "build-webpack": "webpack"
   },
   "dependencies": {
     "defaults": "^1.0.3",
@@ -16,5 +18,8 @@
     "watson-speech": "*",
     "whatwg-fetch": "^1.0.0"
   },
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "webpack": "^2.2.1"
+  }
 }
diff --git a/examples/server.js b/examples/server.js
@@ -27,7 +27,7 @@ app.use(express.static(__dirname + '/static'));
 
 // set up express-browserify to serve bundles for examples
 var isDev = app.get('env') === 'development';
-app.get('/bundle.js', expressBrowserify('static/browserify-app.js', {
+app.get('/browserify-bundle.js', expressBrowserify('static/browserify-app.js', {
   watch: isDev,
   debug: isDev
 }));
@@ -36,6 +36,7 @@ app.get('/audio-video-deprecated/bundle.js', expressBrowserify('static/audio-vid
   debug: isDev
 }));
 
+// webpack bundle is built by running `npm run build-webpack` or `npm start`
 
 // token endpoints
 // **Warning**: these endpoints should be guarded with additional authentication & authorization for production use
diff --git a/examples/static/browserify.html b/examples/static/browserify.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Watson Speech to Text client example</title>
+  <title>Watson Speech to Text Browserify example</title>
 </head>
 <body>
 
@@ -14,10 +14,10 @@ <h2>Output:</h2>
   <div id="output">--</div>
 </section>
 
-<script src="bundle.js"></script>
+<script src="browserify-bundle.js"></script>
 
 <h2>Code for this demo:</h2>
-<p>Note: this code is compiled into <a href="bundle.js"><code>bundle.js</code></a> by <code>express-browserify</code>.
+<p>Note: this code is compiled into <a href="browserify-bundle.js"><code>browserify-bundle.js</code></a> by <code>express-browserify</code>.
   This requires Node.js.</p>
 
 <pre><code><embed type="text/plain" src="browserify-app.js" width="100%" height="600"></embed></code></pre>
diff --git a/examples/static/index.html b/examples/static/index.html
@@ -17,6 +17,7 @@ <h3>Microphone Input</h3>
   <li><a href="microphone-streaming-model.html">Transcribe from Microphone, Streaming with chosen model</a></li>
   <li><a href="microphone-streaming-object-to-console.html">Transcribe from Microphone, send JSON to console (includes text and metadata; v0.22+ format)</a></li>
   <li><a href="browserify.html">Example bundled with browserify</a>*</li>
+  <li><a href="webpack.html">Example bundled with Webpack</a>*</li>
   <li><strike><a href="microphone-streaming-object-extracted-to-console.html">Deprecated: Transcribe from Microphone, send JSON to console with results extracted (pre-v0.22 format)</a></strike></li>
 </ul>
 <h3>File Input</h3>
@@ -33,7 +34,7 @@ <h3>File Input</h3>
   <li><strike><a href="audio-video-deprecated/">Deprecated: Transcribe from HTML5 &lt;audio&gt; or &lt;video&gt; element</a></strike>*</li>
 </ul>
 
-<p>* Examples that depend on browserify work with the example Node.js server, but not the example Python server.</p>
+<p>* Examples that depend on browserify or webpack require Node.js and will not work with the example Python server.</p>
 
 <h2>Text to Speech</h2>
 <ul>
diff --git a/examples/static/webpack-app.js b/examples/static/webpack-app.js
@@ -0,0 +1,31 @@
+// Webpack bundling example
+
+'use strict';
+
+// global window.fetch pollyfill for IE/Edge & Older Chrome/FireFox
+require('whatwg-fetch');
+
+// keep the bundle slim by only requiring the necessary modules
+var recognizeMicrophone = require('watson-speech/speech-to-text/recognize-microphone');
+
+document.querySelector('#button').onclick = function() {
+
+  fetch('/api/speech-to-text/token')
+    .then(function(response) {
+      return response.text();
+    }).then(function(token) {
+
+      var stream = recognizeMicrophone({
+        token: token,
+        continuous: false, // false = automatically stop transcription the first time a pause is detected
+        outputElement: '#output' // CSS selector or DOM Element
+      });
+
+      stream.on('error', function(err) {
+        console.log(err);
+      });
+
+    }).catch(function(error) {
+      console.log(error);
+    });
+};
diff --git a/examples/static/webpack.html b/examples/static/webpack.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Watson Speech to Text Webpack example</title>
+</head>
+<body>
+
+<section>
+  <h2>Transcribe from Microphone</h2>
+  <button id="button">Start Microphone Transcription</button>
+
+  <h2>Output:</h2>
+  <div id="output">--</div>
+</section>
+
+<script src="webpack-bundle.js"></script>
+
+<h2>Code for this demo:</h2>
+<p>Note: this code is compiled into <a href="webpack-bundle.js"><code>webpack-bundle.js</code></a> by running either
+  <code>npm run build-webpack</code> or <code>npm start</code>.
+  This requires Node.js.</p>
+
+<pre><code><embed type="text/plain" src="webpack-app.js" width="100%" height="600"></embed></code></pre>
+
+</body>
+</html>
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -0,0 +1,8 @@
+'use strict';
+
+module.exports = {
+  entry: './static/webpack-app.js',
+  output: {
+    filename: './static/webpack-bundle.js'
+  }
+};
diff --git a/package.json b/package.json
@@ -33,12 +33,14 @@
     "karma-express-http-server": "0.0.1",
     "karma-firefox-launcher": "^1.0.0",
     "karma-mocha": "^1.3.0",
+    "memory-fs": "^0.4.1",
     "mocha": "^3.2.0",
     "serve-static": "^1.11.1",
     "sinon": "^1.17.7",
     "uglify-js": "^2.7.5",
     "watchify": "^3.8.0",
-    "watson-developer-cloud": "^2.14.5"
+    "watson-developer-cloud": "^2.14.5",
+    "webpack": "^2.2.1"
   },
   "dependencies": {
     "clone": "^2.1.0",
diff --git a/test/webpack.js b/test/webpack.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var MemoryFS = require('memory-fs');
+var webpack = require('webpack');
+var path = require('path');
+
+describe('Webpack', function() {
+
+  it('should generate a webpack bundle without errors', function(done) {
+
+    // based on https://webpack.github.io/docs/node.js-api.html#compile-to-memory
+
+    var fs = new MemoryFS();
+
+    var compiler = webpack({
+      entry: path.join(__dirname, '../index.js'),
+      output: {
+        filename: 'test-bundle.js'
+      }
+    });
+    compiler.outputFileSystem = fs;
+    compiler.run(done);
+  });
+
+});
