Mi proyecto escolar en curso me obliga a utilizar WebPack, el paquete de módulos estáticos. Ahora lo que estoy tratando de hacer es exportar
const data = [ { description: "Go swimming", completed: true, index: 1, }, { description: "Create an animated puppet", completed: false, index: 2, }, { description: "Hack NASA", completed: false, index: 2, }, ];e importarlo en mi archivo functions.js con la función de importación. Pero no está funcionando.
Webpack admite módulos nativos de JavaScript (ESM), que sugiero usar. (A diferencia de CommonJS [ require llamadas y demás].)
Casi literalmente tiene la parte de exportación en la pregunta, simplemente mueva la export al bloque de código:
export const data = [ // ... ]; Esa es una exportación con nombre . Lo importas así (si lo anterior está en the-source-module.js en el mismo directorio):
import { data } from "./the-source-module.js";...con la función de importación.
No hay una función de import , pero hay una construcción de import muy similar a una función llamada importación dinámica . Se ve exactamente como una función que devuelve una promesa . Si eso es lo que le dicen que use (en lugar de una declaración de import como se indicó anteriormente), se vería así:
En un entorno que admite await de nivel superior (Webpack lo hace):
const { data } = await import("./the-source-module.js"); // ...use `data` here...En un entorno que no:
import("./the-source-module.js") .then(({data}) => { // ...use `data` here... }) .catch(error => { // ...import failed... }); // DON'T TRY TO USE `data` HERE, IT WON'T WORKMás en MDN:
exportimport (incluye import() )También cubro módulos en el Capítulo 13 de mi libro reciente JavaScript: The New Toys (y promesas en el Capítulo 8, y todas las demás cosas de ES2015-ES2020) .
Nota: El uso de {} en import { data } from ... puede parecerse un poco a la desestructuración, pero no es una desestructuración. Aparte de {} , pero la semántica y la sintaxis de las importaciones con nombre y la desestructuración son bastante diferentes. Por ejemplo, si quisiera usar un nombre que no sea data , sería import { data as yourName } from ... , que no es como funciona el cambio de nombre con la desestructuración.
De manera un poco confusa, los ejemplos anteriores con import() están usando desestructuración. La promesa "devuelta" por import() se cumple con un objeto llamado "objeto de espacio de nombres de módulo" que tiene una propiedad para cada exportación nombrada. Eso, junto con su naturaleza dinámica, es una diferencia fundamental entre la import() y las declaraciones de import .