Merge branch 'tor/documentation/prefer-named-exports' into 'master'

Add documentation of RFC 20

See merge request gitlab-org/gitlab!79466

doc/development/fe_guide/style/javascript.md

@@ -136,24 +136,40 @@ the class name with `js-`.
 
 ## ES Module Syntax
 
-Use ES module syntax to import modules:
+For most JavaScript files, use ES module syntax to import or export from modules. 
+Prefer named exports, as they improve name consistency.
 
 ```javascript
-// bad
-const SomeClass = require('some_class');
+// bad (with exceptions, see below)
+export default SomeClass;
+import SomeClass from 'file';
 
 // good
-import SomeClass from 'some_class';
+export { SomeClass };
+import { SomeClass } from 'file';
+```
+
+Using default exports is acceptable in a few particular circumstances:
+
+- Vue Single File Components (SFCs)
+- Vuex mutation files
+
+For more information, see [RFC 20](https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/20).
 
+## CommonJS Module Syntax
+
+Our Node configuration requires CommonJS module syntax. Prefer named exports.
+
+```javascript
 // bad
 module.exports = SomeClass;
+const SomeClass = require('./some_class');
 
 // good
-export default SomeClass;
+module.exports = { SomeClass };
+const { SomeClass } = require('./some_class');
 ```
 
-We still use `require` in `scripts/` and `config/` files.
-
 ## Absolute vs relative paths for modules
 
 Use relative paths if the module you are importing is less than two levels up.