4

Leyendo la respuesta https://es.stackoverflow.com/a/1371/353 vi como es posible importar modulos utilizando ES6.

Sin embargo, de acuerdo a lo que he leído, aún no esta implementado en los navegadores y por eso es necesario utilizar un transpiler como Babel.js.

Mi problema ahora es que estoy probando un ejemplo y aún me aparece este error Uncaught SyntaxError: Unexpected token import a pesar de haber ejecutado npm run build tal como aparece en la documentación Babel CLI docs y de instalar el plugin de AMD AMD plugin

Así se ve el directorio del ejemplo:

introducir la descripción de la imagen aquí

Y este es el código:

src/functions.js

export function sum (a, b) {
  return a + b
}

src/main.js

'use strict'
import {sum} from 'functions'
let a = 10
let b = 5
console.log(sum(a, b))

dist/main.js

'use strict';

import { sum } from 'functions';
let a = 10;
let b = 5;
console.log(sum(a, b));

dist/main.js

export function sum(a, b) {
  return a + b;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES6 Getting Started</title>
    <meta name="description" content="An example of how to use ES6">
  </head>
  <body>
    <p>
      View the console
    </p>
    <script src="dist/main.js">
    </script>
  </body>
</html>

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src -d dist"
  },
  "devDependencies": {
    "babel-cli": "^6.4.5"
  }
}
6
  • Échale un vistazo a este artículo ES6 In Depth: Using ES6 today with Babel and Broccoli yo uso módulos ES6 pero con TypeScript compilado a ES5 y para la carga Systemjs
    – rsciriano
    Commented el 7 feb. 2016 a las 10:47
  • ¿Te muestra algún error al hacer el build con babel? ¿podrías incluir el contenido archivo compilado? Creo que te está llegando el import al navegador y este no lo reconoce. Por cierto, el `import' debería ser como dice @Wilfredo-P en su respuesta
    – rsciriano
    Commented el 7 feb. 2016 a las 12:28
  • @rsciriano ya incluí los archivos compilados. No me muestra error o warning al hacer build con babel. Commented el 7 feb. 2016 a las 12:56
  • @rsciriano lo intentaré ver más tarde. Es que son tantas cosas que aparecen nuevas que no se donde empezar: que el babel, el browserify, el webpack. el brocoli, el angular, el cli, el ember, y etc etc etc y yo lo único que quiero por ahora es hacer un import.... Commented el 7 feb. 2016 a las 13:06
  • Yo estuve dándole vueltas al esto de los módulos ES6 pero con TypeScript y mi solución final es con WebPack miraré este artículo "TypeScript and webpack". Babel me parece mas complicado y no conseguí llegar a lo que quería (y para la compilación ya tengo a TypeScript)
    – rsciriano
    Commented el 7 feb. 2016 a las 13:15

1 respuesta 1

4

Creo que no te está funcionando el plugin que convierte los módulos ES6 en módulos AMD

Aseguraré que en el archivo .babelrc está incluido el plugin y has instalado el paquete npm

{
    "plugins": ["transform-es2015-modules-amd"]
}

Después de hacer esto, al compilar con babel, los archivos resultantes deberían ser así:

dist/main.js

define(['functions'], function (_functions) {
'use strict';

let a = 10;
let b = 5;
console.log((0, _functions.sum)(a, b));
});

dist/functions.js

define(["exports"], function (exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.sum = sum;

function sum(a, b) {
    return a + b;
}
});

Por último, para cargar los módulos AMD, tienes que usar requirejs, el archivo index.html quedaría así

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES6 Getting Started</title>
    <meta name="description" content="An example of how to use ES6">
  </head>
  <body>
    <p>
      View the console
    </p>
    <script data-main="dist/main" src="libs/require.js">
    </script>
  </body>
</html>
4
  • Tengo que descargar require.js, crear una carpeta libs y ubicarlo ahí, cierto? Commented el 7 feb. 2016 a las 14:38
  • Exacto @JavierCárdenas
    – rsciriano
    Commented el 7 feb. 2016 a las 14:40
  • Perfecto, me funcionó al fin! Mi duda ahora es porque se usa data-main Commented el 7 feb. 2016 a las 15:26
  • 1
    @JavierCárdenas en data-main se establece el módulo principal, lo puede ver aquí, en la documentación de requirejs. Se podría usar de otra manera pero esa es la mas basica. También podrías usar otras librerías de carga de módulos como systemjs que admite módulos en varios formatos
    – rsciriano
    Commented el 7 feb. 2016 a las 15:54

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.