1

Estoy intentando aprender a exportar e importar modulos en ES6 y me dice en la consola: SyntaxError: export declarations may only appear at top level of a module

Estoy probando con algo sencillo. El código lo tengo tal que así:

archivo.js

export default const modulo = function(){
    alert("Hola mundo");
};

Podría luego en una página html dentro de una etiqueta script hacer lo siguiente para probar? pagina.html

import modulo  from 'archivo.js';

Según MDN debería funcionar pero solo la exportación ya da error.

Porqué tanta complicación? No podría usar el revealing pattern en su lugar? Que ventajas ofrecerían los modulos de ES6 frente a los métodos cono el Revealing con funciones inmediatamente ejecutables que devuelvan un objeto (IIFE)? El uso de estos imports/exports evita que tenga que importar en el html los .js con las etiquetas ?

9
  • Estás intentando hacer eso nativamente en el browser o usando babel register, webpack, system.js?
    – ffflabs
    Commented el 20 mar. 2017 a las 10:55
  • @amenadiel No. Babel no he usado nunca. Se lo que es más o menos pero no sabría como suarlo muy bien para "compilar".
    – Lorthas
    Commented el 20 mar. 2017 a las 11:00
  • Entonces significa que tu Chrome ya está entendiendo nativamente ES6? sino te diría que import y export no están soportados, en vez de darte ese error
    – ffflabs
    Commented el 20 mar. 2017 a las 11:05
  • @amenadiel uso principalmente Firefox normal o Developer. Quizás no esté del todo soportado aún?
    – Lorthas
    Commented el 20 mar. 2017 a las 11:09
  • 1
    No necesitas usar una segunda etiqueta script. El archivo principal llamaría a sus imports por su propia cuenta.
    – ffflabs
    Commented el 20 mar. 2017 a las 12:44

2 respuestas 2

1

¿No podría usar el Revealing Module Pattern en su lugar?

Puedes hacerlo perfectamente, de hecho, nada te lo prohíbe. JavaScript es tan flexible que hay muchas formas de hacer lo mismo. El RMP tiene el mismo objetivo que CommonJS, RequireJS, UMD y ES6 modules; usar uno u otro es cuestión de criterio personal.

RMP es un patrón bastante bien diseñado y estructurado, permite escribir módulos con variables/funciones privadas de manera práctica y sencilla. Lo cierto, es que tiene tanto ventajas como desventajas.

Ventajas

  • Práctico y sencillo de implementar.
  • Provee encapsulamiento sencillo.

Desventajas

  • Sobreescritura de variables privadas.

Es bien conocido que RMP tiene un punto débil respecto a la sobreescritura de propiedades privadas ya que se necesita sí o sí setters ya que un objeto literal no funciona como un prototipo. Si no usas getters, necesitarás usar this ya que necesitarías poner las variables directamente en el objeto literal, y esto porsupuesto rompe la ideología de este patrón.

function House (data) {
  let { height, width, large } = data;
  
  return {
    height,
    width,
    large,
    info () {
      console.log('Height:', height);
      console.log('Width:', width);
      console.log('Large:', large);
    }
  };
}

let home = new House({
  height: 3.1,
  width: 7.25,
  large: 18.75
});

// se espera que se pueda sobreescribir
home.height = 3.2;

home.info(); // ups

¿Qué ventajas ofrecerían los modulos de ES6 frente al patrón Revealing con funciones inmediatamente ejecutables que devuelvan un objeto (IIFE)?

En realidad no hay ventajas que se merezca resaltar, salvo por:

  • Estandarización: en un futuro todo módulo (probablemente) será escrito usando ES6 modules.
  • Organización: el código es más organizado, ya que te permite dos tipos de exportaciones (por defecto e independientes).
  • Optimización: se evitan los errores y desventajas comunes de diferentes implementaciones del patrón Module, como en el caso de las referencias entre variabes/funciones privadas y públicas del RMP.

El uso de estos imports/exports evita que tenga que importar en el html los .js con las etiquetas?

No tiene ninguna relación ES6 modules con importar un script en HTML. En este aspecto no ha cambiado absolutamente nada.


Extra

Al día de hoy, ningún navegador soporta ES6 modules a excepción de Safari Preview, pero esto no es problema ya que con Babel podemos traspilar no solo código ES6, si no también ES7/8 y propuestas hacia la ECMA desde incluso el Stage 2. Para traspilar solo necesitas instalar el paquete babel-cli de forma global y los presets que desees. Por ejemplo:

npm i babel-cli babel-preset-es2015 -g

Y traspilas cualquier módulo a ES5:

babel source.js --out-file target.js --presets=es2015

Lo que te genera código ES5 compatible con cualquier navegador viejo y moderno a día de hoy.

0

ES6 aún no esta 100% soportado por los navegadores, aqui se puede ver una tabla de compatibilidad.

La idea de este formato es encapsular las clases y asi separarlas en diferentes archivos. Esta hecho para personas como yo que venimos de lenguajes orientados a objetos (¡¡Muchas gracias!!! :). Por ejemplo tu funcion se escribiria asi:

// hola.jsx
let modulo = () => {
  alert('Hola mundo')
}
export default modulo

y para importarlo como ya sabemos

// main.jsx
import modulo from './hola.jsx'

Ahora bien podemos tener varias clases en nuestro archivo

// misclases.jsx
export class MiClase1 {}
export class MiClase2 {}
export class MiClase3 extends MiClase1 {}

y cuando lo importamos lo hacemos de esta manera

import {MiClase2, MiClase3} from './misclases.jsx'

El compilador lo que hace luego es traducir esto a lo que todos los exploradores conocen. cuando digo compilador me refiero al babel asi que tienes que "babelizar" tu codigo este generalmente lo compila a todo en uno solo. Por ejemplo yo uso estas dependencias para trabajar en un proyecto de react y tengo algunos scripts para compilarlo y testearlo

    "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "*",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "webpack": "^2.1.0-beta.27",
    "browser-sync": "*"
  }
"scripts": {
    "run": "npm run build && browser-sync start --server --startPath \"www\"",
    "build": "browserify main.jsx -o www/bundle.js -t [ babelify --presets [ es2015 react ] ] ",
    "browser": "browser-sync start --server \"www\"",
4
  • Sería bueno saber cómo responde esto a la pregunta del usuario :/
    – ffflabs
    Commented el 20 mar. 2017 a las 10:53
  • La respuesta me da a entender que necesito babel. Lo que no entiendo es que sentido tiene tener que depender de un compilador externo para usar Javascript. Podría seguir usando la manera tradicional de hacer modulos en Javascript o esta desaconsejado por convencion o algo parecido? La gente que usa más hoy día? Yo antes de aprender Javascript aprendí Java y si, al principio se me hizo raro, pero cuando vas entendiendo cosas da más satisfacción y hasta hay cosas raras de Javascript que me gustan quizás por ser raras. Pero lo de los modulos de ES6 no lo entiendo si necesito babel.
    – Lorthas
    Commented el 20 mar. 2017 a las 10:58
  • Puedes usar cualquier loader ES6, pero todos en algún momento van a transpilar tu código ES6 a ES5. Por eso tu pregunta sin contexto no tiene una respuesta específica
    – ffflabs
    Commented el 20 mar. 2017 a las 11:06
  • Esta respuesta sería para una pregunta como: "¿Por qué se lanza error en los navegadores al usar ES6 modules?".
    – gugadev
    Commented el 20 mar. 2017 a las 14:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.