10. Módulos ES6

Los módulos ES6 permiten crear aplicaciones JavaScript estructuradas en módulos independientes y reutilizables.

10.1. scripts [import-01, export-01]

El script [import-01] utilizará el módulo [export-01]. Esto se define de la siguiente manera:


1. // Default export of an unnamed object
2. export default {
3.   data: 2,
4.   do() {
5.     console.log(this.data);
6.   }
7. };

Comentarios

Líneas [2-7] definir un objeto sin nombre con las propiedades [data, do];
Línea 2: La [export default] declaración exporta este objeto. Por lo tanto, se puede importar;

El [export-01] módulo es utilizado por el [import-01] script como sigue:


1. 'use strict';
2. // import an object exported by default
3. import export01 from './export-01';
4. // use of this object
5. export01.do();
6. // You can import a default export under any name
7. import data from './export-01';
8. console.log(data.data);

Comentarios

Las líneas 3 y 7 importan el objeto exportado por defecto del [export-01] módulo con dos nombres diferentes;
Una vez importado un objeto, se puede utilizar como si se hubiera definido localmente en el script;

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-01.js"
2. 2
3. 2

10.2. scripts [import-02, export-02]

Estos scripts demuestran la exportación de un objeto con nombre.

El [export-02] script es el siguiente:


1. // Default export of a named object
2. const data = {
3.   data: 2,
4.   do() {
5.     console.log(this.data);
6.   }
7. };
8. // export
9. export default data;

línea 9: exportamos el [data] objeto;

Que el objeto exportado tenga nombre o no no afecta a la operación de importación. El [import-02] script es el siguiente:


1. 'use strict';
2. // import an object exported by default
3. import module1 from './export-02';
4. // use this object
5. module1.do();
6. // You can import a default export under any name
7. import module2 from './export-02';
8. console.log(module2.data);

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-02.js"
2. 2
3. 2

10.3. scripts [import-03, export-03]

Un módulo puede exportar varios elementos.

El [export-03] script es el siguiente:


1. // multi-exports
2. // export object
3. const data = {
4.   data: 2,
5.   do() {
6.     console.log(this.data);
7.   }
8. };
9. // export function
10. export { data };
11. function doSomething() {
12.   console.log("doSomething");
13. }
14. export { doSomething };

Comentarios

Líneas 10 y 14: exportación de dos elementos. Un elemento se exporta utilizando la sintaxis [export {element}];

El [import-03] script utiliza el [export-03] módulo como sigue:


1. 'use strict';
2. // Importing a module [export03]
3. import {data, doSomething} from './export-03';
4. // using the imports
5. data.do();
6. doSomething();
7. // alternative syntax
8. import * as module from './export-03';
9. // using the import
10. console.log(module.data);
11. module.doSomething();

línea 3: [importaciones] se realizan utilizando los nombres exactos de los objetos exportados;
línea 8: puedes importar todos los objetos exportados en un objeto con nombre (aquí [módulo]);

Ejecución


1. [Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe -r esm "c:\Data\st-2019\dev\es6\javascript\modules\import-03.js"
2. 2
3. doSomething
4. { data: 2, do: [Function: do] }
5. doSomething