Análisis de problemas de uso del módulo ES6

Después de que ES6 introdujo el concepto de modularidad, JavaScript se convirtió en un vagabundo de la nueva era.

Durante el uso encontré algunos problemas o cosas que no entendí, haré un resumen aquí.

No implica commonjs, sólo para importyexport

---

Tome reaccionar como ejemplo

Exportar un componente de función, escritura convencional:

export default function App() {
    
    
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

Aquí puedo optar por borrar el nombre de la función, no hay problema.

export default function () {
    
    
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

En comparación con el primero, una diferencia que se puede observar es que en las herramientas de desarrollo del navegador React, el nombre del componente se convierte en default.

En segundo lugar, la exportación predeterminada generalmente se escribe al final del archivo para facilitar la observación. Esta es una práctica recomendada, por lo que es necesario reescribirla.

function App() {
    
    
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

export default App

Al principio, mi método de escritura era principalmente como el primer ejemplo, donde escribía la exportación y la definición de la función en una línea, sin otra razón que mantener pequeña la cantidad de líneas de código. Cuando leí algo de código fuente más tarde, descubrí que la mayoría de las exportaciones predeterminadas estaban escritas al final, así que elegí este método de escritura y seguí a los grandes.

---

Continuar explorando

Sólo discuta los problemas que surjan, no los aspectos prácticos.

Continuando con el ejemplo anterior, si busca simplificar, reescríbalo como una función de flecha.

const App = () => (
  <div>
    <h1>APP</h1>
  </div>
)

export default App

Método de escritura extremo

export default () => (
  <div>
    <h1>APP</h1>
  </div>
)

Pero si está escrito así, no funcionará.

export default const App = () => (
  <div>
    <h1>APP</h1>
  </div>
)

De hecho, si se defaultelimina, esta exportación funcionará nuevamente. Junto con la exportación predeterminada exitosa anterior, este comportamiento hace que el error sea aún más confuso. Encontré esta respuesta en el foro.

https://stackoverflow.com/questions/36261225/why-is-export-default-const-invalid

En primer lugar, debe quedar claro que cada archivo solo puede tener una exportación predeterminada. Si desea exportar varios datos de forma predeterminada, debe utilizar objetos.

Para las declaraciones de variables, normalmente las escribimos una por una, pero puedes usar comas para separarlas y declarar varias variables a la vez.

const a = 1
const b = 2

const c = 3,
      d = 4

Si realmente declara varias variables, se infringirán las reglas de exportación predeterminada. Para evitar que esto suceda, export defaultno puede existir en la misma línea que la declaración de variable .

exportNo hay problema, puede aceptar múltiples exportaciones.

---

Veamos otro escenario que no funciona.

import store from "./store"

// bad
export store

import store from "./store"

export default store

¿Por qué el primero no surte efecto? Para ser justos, se importa desde otro archivo. ¿No es correcto exportarlo por nombre?

Cambiar de escenario puede reflejar mejor esto.

const store = 10  

// bad
export store

Está bien si es un objeto, pero ¿y si es un tipo simple? No hay manera de recibirlo del otro lado.

export 10

Para tipos simples, solo se pueden exportar en forma de objeto o predeterminada.

const store = 10  

export {
    
    
  store
}

Para los datos importados de forma predeterminada, solo se pueden exportar nuevamente de forma predeterminada; de lo contrario, se pueden agregar {}, lo que puede agregar el valor clave correspondiente.

---

Cuando estaba navegando por algunas bibliotecas, encontré una forma de escribir como esta.

export {
    
     default as store } from "./store"

Este es un método de escritura combinado. Al importar el archivo de destino y exportarlo de forma predeterminada, asígnele un nombre y expórtelo en el archivo actual, que es el juego de la estación de transferencia sin ningún procesamiento secundario.

import store from "./store"
export {
    
     store }

---

Descubrí que todavía quedaban algunas preguntas sin resolver, así que publiqué esta secuela.