Skip to content

Commit 31ca537

Browse files
committed
Updated README: Adding section on Modules
1 parent 531ed8c commit 31ca537

File tree

1 file changed

+109
-1
lines changed

1 file changed

+109
-1
lines changed

README.md

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,4 +258,112 @@ var luke = { occupation: 'jedi', father: 'anakin' }
258258
var {occupation, father} = luke;
259259
console.log(occupation); // 'jedi'
260260
console.log(father); // 'anakin'
261-
```
261+
```
262+
263+
## Modules
264+
265+
Prior to ES6, we used libraries such as **Browserify** to create modules on the client-side, and **require** in **Node.js**. With ES6, we can now directly use modules of all types (AMD and CommonJS).
266+
267+
### Exporting in CommonJS
268+
269+
```javascript
270+
module.exports = 1
271+
module.exports = { foo: 'bar' }
272+
module.exports = ['foo', 'bar']
273+
module.exports = function bar () {}
274+
```
275+
276+
### Exporting in ES6
277+
278+
With ES6, we have various flavors of exporting. We can perform **Named Exports**:
279+
280+
```javascript
281+
export var name = 'David';
282+
export var age = 25;​​
283+
```
284+
285+
As well as **exporting a list** of objects:
286+
287+
```javascript
288+
function sumTwo(a, b) {
289+
return a + b;
290+
}
291+
292+
function sumThree(a, b) {
293+
return a + b + c;
294+
}
295+
296+
export { sumTwo, sumThree };
297+
```
298+
299+
We can also export a value simply by using the **export** keyword:
300+
301+
```javascript
302+
export function sumTwo(a, b) {
303+
return a + b;
304+
}
305+
306+
export function sumThree(a, b) {
307+
return a + b + c;
308+
}
309+
```
310+
311+
And lastly, we can **export default bindings**:
312+
313+
```javascript
314+
function sumTwo(a, b) {
315+
return a + b;
316+
}
317+
318+
function sumThree(a, b) {
319+
return a + b + c;
320+
}
321+
322+
var api = {
323+
sumTwo : sumTwo,
324+
sumThree: sumThree
325+
}
326+
327+
export default api
328+
```
329+
330+
> **Best Practices**: Always use the **export default** method at **the end** of the module. It makes it clear what is being exported, and saves time by having to figure out what name a value was exported as. Moreso, the common practice in CommonJS modules is to export a single value or object. By sticking to this paradigm, we make our code easily readable and allows us to interpolate between CommonJS and ES6 modules.
331+
332+
### Importing in ES6
333+
334+
ES6 provides us with various flavors of importing. We can import an entire file:
335+
336+
```javascript
337+
import `underscore`
338+
```
339+
340+
> It is important to note that simply **importing an entire file will execute all code at the top level of that file**.
341+
342+
We can also use destructuring to import a list of values from a file:
343+
344+
```javascript
345+
import { sumTwo, sumThree } from 'math/addition'
346+
```
347+
348+
Similar to Python, we have named imports:
349+
350+
```javascript
351+
import {
352+
sumTwo as addTwoNumbers,
353+
sumThree as sumThreeNumbers} from
354+
} from 'math/addition'
355+
```
356+
357+
And lastly, we can **import all the things**:
358+
359+
```javascript
360+
import * as util from 'math/addition'
361+
```
362+
363+
> **Note**: Values that are exported are **bindings**, not references. Therefore, changing the binding of a variable in one module will affect the value within the exported module. Avoid changing the public interface of these exported values.
364+
365+
366+
367+
368+
369+

0 commit comments

Comments
 (0)