from - importar clases en javascript

`export const` vs.` export default` en ES6

Question

Estoy tratando de determinar si hay grandes diferencias entre estos dos, además de poder importar con export default simplemente haciendo:

import myItem from ''myItem'';

Y usando export const puedo hacer:

import { myItem } from ''myItem'';

Me pregunto si hay diferencias y / o casos de uso distintos a este.

Answer 1

Cuando pones por defecto, se llama exportación por defecto. Solo puede tener una exportación predeterminada por archivo y puede importarla en otro archivo con el nombre que desee. Cuando no establece el valor predeterminado, se llama exportación con nombre, debe importarlo en otro archivo usando el mismo nombre con llaves dentro.

Answer 2

De la documentación :

Las exportaciones con nombre son útiles para exportar varios valores. Durante la importación, se podrá usar el mismo nombre para referirse al valor correspondiente.

En cuanto a la exportación predeterminada, solo hay una única exportación predeterminada por módulo. Una exportación predeterminada puede ser una función, una clase, un objeto o cualquier otra cosa. Este valor debe considerarse como el valor exportado "principal", ya que será el más sencillo de importar.

Answer 3

Es una exportación con nombre frente a una exportación predeterminada. export const es una exportación con nombre que exporta una declaración o declaraciones const.

Para enfatizar: lo que importa aquí es la palabra clave export como const se usa para declarar una declaración o declaraciones const. export también se puede aplicar a otras declaraciones, como declaraciones de clase o función.

Exportación predeterminada ( export default )

Puede tener una exportación predeterminada por archivo. Cuando importa tiene que especificar un nombre e importar así:

import MyDefaultExport from "./MyFileWithADefaultExport";

Puedes ponerle el nombre que quieras.

Exportación con nombre ( export )

Con exportaciones con nombre, puede tener múltiples exportaciones con nombre por archivo. Luego importe las exportaciones específicas que desee rodeadas de llaves:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

O es posible usar un valor predeterminado junto con importaciones con nombre en la misma declaración:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Importar espacio de nombres

También es posible importar todo desde el archivo en un objeto:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

Notas

• La sintaxis favorece las exportaciones predeterminadas como un poco más concisas porque su caso de uso es más común ( vea la discusión aquí ).

• Una exportación predeterminada es en realidad una exportación con nombre con el nombre default por lo que puede importarla con una importación con nombre:

  import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

Answer 4

Nota menor: Tenga en cuenta que cuando importa desde una exportación predeterminada, la denominación es completamente independiente. Esto realmente tiene un impacto en las refactorizaciones.

Digamos que tiene una clase Foo como esta con la importación correspondiente:

export default class Foo { }

//the name ''Foo'' could be anything, since it''s just an
//identifier for the default export
import Foo from ''./Foo''

Ahora, si refactoriza su clase Foo para que sea Bar y también cambie el nombre del archivo, la mayoría de los IDE NO tocarán su importación. Entonces terminarás con esto:

export default class Bar { }

//the name ''Foo'' could be anything, since it''s just an
//identifier for the default export.
import Foo from ''./Bar''

Especialmente en Typecript, realmente aprecio las exportaciones con nombre y la refactorización más confiable. La diferencia es solo la falta de la palabra clave default y las llaves. Este, por cierto, también le impide hacer un error tipográfico en su importación, ya que ahora tiene verificación de tipo.

export class Foo { }

//''Foo'' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from ''./Foo''

Answer 5

Tuve el problema de que el navegador no usa es6.

Lo solucioné con:

 <script type="module" src="index.js"></script>

El módulo de tipo le dice al navegador que use ES6.

export const bla = [1,2,3];

import {bla} from ''./example.js'';

Entonces debería funcionar.

Answer 6

export afecta la forma en que se debe usar la sintaxis de importación al importar un módulo.

Un caso de uso útil, que me gusta (y uso), es permitir exportar una función anónima sin tener que nombrarla explícitamente , y solo cuando esa función se importa, se le debe dar un nombre:

Example:

módulo 1

export function divide( x ){
    return x / 2;
}

// only one ''default'' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

módulo_2

// The default function should be the first to import (and named whatever)
import square, {divide} from ''./module_1.js''; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

Cuando se usa la sintaxis {} para importar una función (o variable), significa que lo que se importa ya fue nombrado cuando se exportó, por lo que uno debe importarlo exactamente con el mismo nombre, de lo contrario, la importación no funcionaría.

Ejemplos erróneos:

1. La función predeterminada debe ser primero para importar

   import {divide}, square from ''./module_1.js

2. divide_1 no se exportó en module_1.js , por lo tanto, no se importará nada

   import {divide_1} from ''./module_1.js

3. square no se exportó en module_1.js , porque {} le dice al motor que busque explícitamente solo exportaciones con nombre .

   import {square} from ''./module_1.js