replace AMD with Browserify (fixes #48)

MozillaReality · May 14, 2015 · 31f75e6 · 31f75e6
1 parent f3a6f42
commit 31f75e6
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 91 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,9 +1,10 @@
+var fs = require('fs');
+
 var firefoxConnect = require('node-firefox-connect');
 var gulp = require('gulp');
 
-var babel = require('gulp-babel');
-var sourcemaps = require('gulp-sourcemaps');
-var gutil = require('gulp-util');
+var babelify = require('babelify');
+var browserify = require('browserify');
 var del = require('del');
 var jshint = require('gulp-jshint');
 var runSequence = require('run-sequence');
@@ -12,7 +13,6 @@ var webserver = require('gulp-webserver');
 
 const SRC_ROOT = './src/';
 const ADDON_ROOT = './src/addon/';
-const STANDALONE_ROOT = './src/standalone/';
 const WEB_ROOT = './src/web/';
 const DIST_ROOT = './dist/';
 const DIST_ADDON_ROOT = './dist/addon/';
@@ -55,7 +55,7 @@ gulp.task('install', ['copy-web-app', 'copy-addon-core', 'pre-commit']);
 gulp.task('copy-web-app', function() {
   return gulp.src([
       WEB_ROOT + '**',
-      '!' + WEB_ROOT + 'js/*.js' // do not copy js
+      '!' + WEB_ROOT + 'js/{*,**/*}' // do not copy js
     ])
     .pipe(gulp.dest(DIST_WEB_ROOT));
 });
@@ -70,25 +70,19 @@ gulp.task('copy-addon-core', function() {
 /**
  * converts javascript to es5. this allows us to use harmony classes and modules.
  */
-gulp.task('babel', function() {
-  var files = [
-    WEB_ROOT + 'js/*.js',
-    WEB_ROOT + 'js/**/*.js',
-    '!' + WEB_ROOT + 'js/ext/*.js' // do not process external files
-  ];
-  try {
-    return gulp.src(files)
-      .pipe(process.env.PRODUCTION ? gutil.noop() : sourcemaps.init())
-      .pipe(babel({
-        modules: 'amd'
-      }).on('error', function(e) {
-        console.log('error running babel', e);
-      }))
-      .pipe(process.env.PRODUCTION ? gutil.noop() : sourcemaps.write('.'))
-      .pipe(gulp.dest(DIST_WEB_ROOT + 'js/'));
-  } catch (e) {
-    console.log('Got error in babel', e);
-  }
+gulp.task('babelify', function() {
+  return browserify({
+    entries: WEB_ROOT + 'js/browser.js',
+    debug: !!!process.env.PRODUCTION
+  })
+  .transform(babelify.configure({
+    sourceMap: !!!process.env.PRODUCTION
+  }))
+  .on('error', function (err) {
+    console.log('Error running babelify', err.message);
+  })
+  .bundle()
+  .pipe(fs.createWriteStream(DIST_WEB_ROOT + 'js/main.js'));
 });
 
 
@@ -117,14 +111,14 @@ gulp.task('make-addon-zip', function() {
 /**
  * Runs travis tests
  */
-gulp.task('travis', ['lint', 'babel']);
+gulp.task('travis', ['lint', 'babelify']);
 
 
 /**
  * Build the app.
  */
 gulp.task('build', function(cb) {
-  runSequence(['clobber'], ['copy-web-app', 'copy-addon-core'], ['babel', 'lint' ], cb);
+  runSequence(['clobber'], ['copy-web-app', 'copy-addon-core'], ['babelify', 'lint'], cb);
 });
 
 

diff --git a/package.json b/package.json
@@ -26,12 +26,12 @@
   },
   "devDependencies": {
     "babel": "^5.1.10",
+    "babelify": "^6.1.0",
+    "browserify": "^10.1.3",
     "del": "^1.1.1",
     "gulp": "3.8.x",
     "gulp-babel": "^4.0.0",
     "gulp-jshint": "^1.9.4",
-    "gulp-sourcemaps": "^1.5.2",
-    "gulp-util": "^3.0.4",
     "gulp-webserver": "^0.9.0",
     "gulp-zip": "^3.0.2",
     "node-firefox-connect": "^1.2.0",

diff --git a/src/web/index.html b/src/web/index.html
@@ -3,7 +3,7 @@
 	<meta charset="UTF-8">
 	<title>Horizon</title>
   <link rel="stylesheet" href="css/navigation.css">
-	<script data-main="js/browser" src="js/ext/require.js"></script>
+	<script data-main="js/browser" src="js/main.js"></script>
 </head>
 <body>
 
@@ -13,7 +13,7 @@
     <!-- container acting as camera -->
     <div id="camera" class="threed">
 
-      <!-- HUD interface elements -->    
+      <!-- HUD interface elements -->
       <div id="hud" class="threed">
         <div id="frames" class="threed">
           <!-- browser content iframes -->
@@ -26,7 +26,7 @@
           <form action="#" id="urlbar">
             <input type="text">
           </form>
-          
+
           <span data-action="reload">&#x21bb;</span>
           <span data-action="stop">x</span>
           <span data-action="new">+</span>
@@ -38,6 +38,6 @@
   </div>
 
   <button id="entervr">Enter VR</button>
-  
+
 </body>
 </html>
diff --git a/src/web/js/browser.js b/src/web/js/browser.js
@@ -1,21 +1,26 @@
-import * as Debugging from 'js/debugging.js';
-import * as FrameManager from 'js/frame_manager.js';
-import * as ViewportManager from 'js/viewport_manager.js';
-import * as GamepadControl from 'js/controls/gamepad.js';
-import * as KeyboardControl from 'js/controls/keyboard.js';
-import * as Utils from 'js/lib/utils.js';
+import Debugging from './debugging.js';
+import FrameManager from './frame_manager.js';
+import ViewportManager from './viewport_manager.js';
+import GamepadControl from './controls/gamepad.js';
+import KeyboardControl from './controls/keyboard.js';
+import Utils from './lib/utils.js';
 
-var runtime = {};
-runtime.utils = new Utils();
+window.addEventListener('DOMContentLoaded', function () {
+  // Wait for the document to load so the constructors can
+  // find their necessary elements.
 
-runtime.debugging = new Debugging();
-runtime.frameManager = new FrameManager();
-runtime.gamepadControl = new GamepadControl();
-runtime.keyboardControl = new KeyboardControl();
-runtime.viewportManager = new ViewportManager();
+  var runtime = {};
+  runtime.utils = new Utils();
 
-runtime.debugging.start(runtime);
-runtime.frameManager.start(runtime);
-runtime.gamepadControl.start(runtime);
-runtime.keyboardControl.start(runtime);
-runtime.viewportManager.start(runtime);
+  runtime.debugging = new Debugging();
+  runtime.frameManager = new FrameManager();
+  runtime.gamepadControl = new GamepadControl();
+  runtime.keyboardControl = new KeyboardControl();
+  runtime.viewportManager = new ViewportManager();
+
+  runtime.debugging.start(runtime);
+  runtime.frameManager.start(runtime);
+  runtime.gamepadControl.start(runtime);
+  runtime.keyboardControl.start(runtime);
+  runtime.viewportManager.start(runtime);
+});