Move builds from browserify to webpack

dist/aframe-physics-system.min.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2010-2022 Three.js Authors
+ * SPDX-License-Identifier: MIT
+ */

package.json

@@ -4,8 +4,10 @@
   "description": "Physics system for A-Frame VR, built on Cannon.js & Ammo.js",
   "main": "index.js",
   "scripts": {
-    "dev": "budo index.js:dist/aframe-physics-system.js -d examples --port 8000 -- -g browserify-shim",
-    "dist": "browserify -g browserify-shim index.js -o dist/aframe-physics-system.js && uglifyjs -c -o dist/aframe-physics-system.min.js -- dist/aframe-physics-system.js",
+    "dev": "npx webpack serve",
+    "dist": "npm run dist:dev && npm run dist:prod",
+    "dist:dev": "webpack --config webpack.config.js",
+    "dist:prod": "webpack --config webpack.prod.config.js",
     "test": "karma start ./tests/karma.conf.js",
     "test:once": "karma start ./tests/karma.conf.js --single-run",
     "test:firefox": "karma start ./tests/karma.conf.js --browsers Firefox",
@@ -17,9 +19,6 @@
     "postversion": "git push && git push --tags && npm publish",
     "postinstall": "patch-package"
   },
-  "browserify-shim": {
-    "three": "global:THREE"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/c-frame/aframe-physics-system.git"
@@ -49,36 +48,35 @@
     "cannon-es": "^0.9.1",
     "three-to-ammo": "^0.1.0",
     "three-to-cannon": "^4.0.0",
-    "webworkify": "^1.4.0"
+    "webpack": "^5.75.0",
+    "webpack-dev-server": "^4.11.1",
+    "webworkify-webpack": "^2.1.5"
   },
   "peerDependencies": {
     "aframe": ">=0.5.0"
   },
   "devDependencies": {
     "aframe": "~1.1.0",
-    "browserify": "^16.5.1",
-    "browserify-css": "^0.15.0",
-    "browserify-shim": "^3.8.14",
-    "budo": "^11.6.3",
     "chai": "^3.5.0",
     "chai-shallow-deep-equal": "^1.4.6",
     "envify": "^4.1.0",
     "karma": "^4.4.1",
-    "karma-browserify": "^6.1.0",
     "karma-chai-shallow-deep-equal": "0.0.4",
     "karma-chrome-launcher": "^2.2.0",
     "karma-env-preprocessor": "^0.1.1",
     "karma-firefox-launcher": "^1.3.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sinon-chai": "^1.3.4",
+    "karma-webpack": "^5.0.0",
     "mocha": "^6.2.3",
     "patch-package": "^6.5.0",
     "replace": "^1.2.0",
     "sinon": "^2.4.1",
     "sinon-chai": "^2.14.0",
     "three": ">=0.125.0",
-    "uglify-es": "^3.3.9"
+    "uglify-es": "^3.3.9",
+    "webpack-cli": "^5.0.1"
   },
   "directories": {
     "doc": "docs",

src/drivers/worker-driver.js

@@ -1,6 +1,6 @@
 /* global performance */
 
-var webworkify = require('webworkify'),
+var webworkify = require('webworkify-webpack'),
     webworkifyDebug = require('./webworkify-debug'),
     Driver = require('./driver'),
     Event = require('./event'),

tests/karma.conf.js

@@ -1,10 +1,9 @@
+var webpackConfiguration = require("../webpack.config.js");
+
 module.exports = function (config) {
   config.set({
     basePath: '../',
-    browserify: {
-      debug: true,
-      paths: ['src']
-    },
+    webpack: webpackConfiguration,
     browsers: ['Firefox', 'Chrome'],
     client: {
       captureConsole: true,
@@ -14,8 +13,8 @@ module.exports = function (config) {
     files: [
       {pattern: 'tests/**/*.test.js'}
     ],
-    frameworks: ['mocha', 'sinon-chai', 'chai-shallow-deep-equal', 'browserify'],
-    preprocessors: {'tests/**/*.js': ['browserify', 'env']},
+    frameworks: ['mocha', 'sinon-chai', 'chai-shallow-deep-equal', 'webpack'],
+    preprocessors: {'tests/**/*.js': ['webpack', 'env']},
     reporters: ['mocha']
   });
 };

webpack.config.js

@@ -0,0 +1,52 @@
+// Webpack uses this to work with directories
+const path = require('path');
+
+// This is the main configuration object.
+// Here, you write different options and tell Webpack what to do
+module.exports = {
+
+  // Path to your entry point. From this file Webpack will begin its work
+  entry: './index.js',
+
+  // Path and filename of your result bundle.
+  // Webpack will bundle all JavaScript into this file
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'aframe-physics-system.js'
+  },
+
+  resolve: {
+    fallback: {
+        "fs": false,
+        "path": false
+    },
+  },
+
+  devServer: {
+    static: {
+      directory: path.join(__dirname, ''),
+    },
+
+    onListening: function (devServer) {
+      if (!devServer) {
+        throw new Error('webpack-dev-server is not defined');
+      }
+      const brightYellow = "\x1b[1m\x1b[33m"
+      const underscoreCyan = "\x1b[4m\x1b[36m"
+      const reset = "\x1b[0m"
+
+      const port = devServer.server.address().port;
+      console.log(brightYellow)
+      console.log("***********************************************************************");
+      console.log(`*   View examples at ${underscoreCyan}http://localhost:${port}/examples${reset}${brightYellow}                   *`);
+      console.log("***********************************************************************");
+      console.log(reset)
+    },
+  },
+
+  // Default mode for Webpack is production.
+  // Depending on mode Webpack will apply different things
+  // on the final bundle. For now, we don't need production's JavaScript 
+  // minifying and other things, so let's set mode to development
+  mode: 'development'
+};

webpack.prod.config.js

@@ -0,0 +1,11 @@
+var path = require('path');
+var merge = require('webpack-merge').merge;
+var commonConfiguration = require('./webpack.config.js');
+
+module.exports = merge(commonConfiguration, {
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'aframe-physics-system.min.js'
+  },
+  mode: 'production'
+});