Expose ES module, remove browserify mention and use import syntax in …

…documentation (#5654)

* Expose ES module, remove browserify mention and use ES syntax in documentation

* simply use require('aframe') to require the cjs build

* add missing quote

README.md

@@ -171,7 +171,7 @@ npm install --save aframe
 ```
 
 ```js
-require('aframe')  // e.g., with Browserify or Webpack.
+import AFRAME from 'aframe';  // e.g., with Webpack or Vite.
 ```
 
 ## Local Development

docs/components/look-controls.md

@@ -51,10 +51,6 @@ controls how we want (e.g., limit the pitch on touch, reverse one axis). If we
 were to include every possible configuration into the core component, we would
 be left maintaining a wide array of flags.
 
-The component lives within a Browserify/Webpack context so you'll need to
-replace the `require` statements with A-Frame globals (e.g.,
-`AFRAME.registerComponent`, `window.THREE`), and get rid of the `module.exports`.
-
 ## Caveats
 
 If you want to create your own component for look controls, you will have to

docs/core/globals.md

@@ -8,8 +8,7 @@ source_code: src/index.js
 ---
 
 A-Frame exposes its public interface through the `window.AFRAME` browser
-global. This same interface is also exposed if requiring with CommonJS
-(`require('aframe')`).
+global. This same interface is also exposed when you import aframe (`import AFRAME from 'aframe'`).
 
 ## `AFRAME` Properties
 
@@ -56,7 +55,7 @@ It is possible to run A-Frame in [Node.js](https://nodejs.org/en/about) to get a
 ```js
 const cleanup = require('jsdom-global')();
 global.customElements = { define: function () {} };
-var aframe = require('aframe/src');
+const aframe = require('aframe');
 console.log(aframe.version);
 cleanup();
 ```

docs/introduction/installation.md

@@ -90,11 +90,11 @@ We can also install A-Frame through npm:
 $ npm install aframe
 ```
 
-Then we can bundle A-Frame into our application. For example, with Browserify
-or Webpack:
+Then we can bundle A-Frame into our application. For example, with Webpack or
+Vite:
 
 ```js
-require('aframe');
+import AFRAME from 'aframe';
 ```
 
 [angle]: https://www.npmjs.com/package/angle

package.json

@@ -3,7 +3,14 @@
   "version": "1.6.0",
   "description": "A web framework for building virtual reality experiences.",
   "homepage": "https://aframe.io/",
-  "main": "dist/aframe-master.js",
+  "main": "./dist/aframe-master.js",
+  "module": "./dist/aframe-master.module.min.js",
+  "exports": {
+    ".": {
+      "import": "./dist/aframe-master.module.min.js",
+      "require": "./dist/aframe-master.js"
+    }
+  },
   "scripts": {
     "dev": "cross-env INSPECTOR_VERSION=dev webpack serve --port 8080",
     "dist": "node scripts/updateVersionLog.js && npm run dist:min && npm run dist:max && npm run dist:module",

tests/node/test.js

@@ -1,7 +1,6 @@
 /* eslint-env mocha */
 'use strict';
 
-const path = require('path');
 const assert = require('assert');
 
 suite('node acceptance tests', function () {
@@ -16,7 +15,7 @@ suite('node acceptance tests', function () {
   });
 
   test('can run in node', function () {
-    const aframe = require(path.join(process.cwd(), 'src'));
+    const aframe = require('aframe');
 
     assert.ok(aframe.version);
   });
@@ -25,7 +24,7 @@ suite('node acceptance tests', function () {
     let aframe;
 
     setup(function () {
-      aframe = require(path.join(process.cwd(), 'src'));
+      aframe = require('aframe');
     });
 
     test('isNodeEnvironment is true for node', function () {