ES6 - Módulos

Introducción

Considere un escenario en el que es necesario reutilizar partes del código JavaScript. ES6 viene a tu rescate con el concepto de Modules.

Un módulo organiza un conjunto relacionado de código JavaScript. Un módulo puede contener variables y funciones. Un módulo no es más que un fragmento de código JavaScript escrito en un archivo. De forma predeterminada, las variables y funciones de un módulo no están disponibles para su uso. Las variables y funciones dentro de un módulo deben exportarse para que se pueda acceder a ellas desde otros archivos. Los módulos en ES6 funcionan solo enstrict mode. Esto significa que las variables o funciones declaradas en un módulo no serán accesibles globalmente.

Exportar un módulo

La palabra clave export se puede utilizar para exportar componentes en un módulo. Las exportaciones de un módulo se pueden clasificar de la siguiente manera:

Exportaciones nombradas
Exportaciones predeterminadas

Exportaciones nombradas

Las exportaciones denominadas se distinguen por sus nombres. Puede haber varias exportaciones con nombre en un módulo. Un módulo puede exportar componentes seleccionados usando la sintaxis que se proporciona a continuación:

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

Alternativamente, los componentes de un módulo también se pueden exportar usando una sola palabra clave de exportación con {} sintaxis de enlace como se muestra a continuación:

//using single export keyword

export {component1,component2,....,componentN}

Exportaciones predeterminadas

Los módulos que necesitan exportar solo un valor pueden usar exportaciones predeterminadas. Solo puede haber una exportación predeterminada por módulo.

Syntax

export default component_name

Sin embargo, un módulo puede tener una exportación predeterminada y varias exportaciones con nombre al mismo tiempo.

Importar un módulo

Para poder consumir un módulo, utilice el import keyword. Un módulo puede tener múltiplesimport statements.

Importación de exportaciones con nombre

Al importar exportaciones con nombre, los nombres de los componentes correspondientes deben coincidir.

Syntax

import {component1,component2..componentN} from module_name

Sin embargo, al importar exportaciones con nombre, se les puede cambiar el nombre mediante la palabra clave as. Utilice la sintaxis que se indica a continuación:

import {original_component_name as new_component_name }

Todas las exportaciones con nombre se pueden importar a un objeto usando el asterisco * operator.

import * as variable_name from module_name

Importación de exportaciones predeterminadas

A diferencia de las exportaciones con nombre, una exportación predeterminada se puede importar con cualquier nombre.

Syntax

import any_variable_name from module_name

Ejemplo: exportaciones con nombre

Step 1 - Cree un archivo company1.js y agregue el siguiente código -

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2- Crea un archivo company2.js. Este archivo consume componentes definidos en el archivo company1.js. Utilice cualquiera de los siguientes enfoques para importar el módulo.

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 - Ejecutar los módulos usando un archivo HTML

Para ejecutar ambos módulos, necesitamos crear un archivo html como se muestra a continuación y ejecutarlo en el servidor en vivo. Tenga en cuenta que debemos usar elattribute type="module" en la etiqueta de script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

La salida del código anterior será como se indica a continuación:

TutorialsPoint
TUTORIALSPOINT

Exportación predeterminada

Step 1 - Crea un archivo company1.js y agregue el siguiente código -

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 - Crea un archivo company2.js. Este archivo consume los componentes definidos en el archivo company1.js.

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 - Ejecuta el modules usando un HTML file

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

La salida del código anterior será la que se menciona a continuación:

TutorialsPoint
Google Inc

Ejemplo: combinación de exportaciones predeterminadas y denominadas

Step 1 - Crea un archivo company1.js y agregue el siguiente código -

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 - Crea un archivo company2.js. Este archivo consume los componentes definidos en elcompany1.jsarchivo. Importe la exportación predeterminada primero, seguida de las exportaciones con nombre.

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 - Ejecutar los módulos usando un archivo HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

La salida del código anterior será como se muestra a continuación:

TutorialsPoint
TutorialsPoint
Mohtashim

↰ Previous page Next page ↱