Soy nuevo en ES6 (ECMAScript 6) y me gustaría usar su sistema de módulos en el navegador. Leí que ES6 es compatible con Firefox y Chrome, pero obtengo el siguiente error al usarexport
Uncaught SyntaxError: Unexpected token import
Tengo un archivo test.html
<html>
<script src="test.js"></script>
<body>
</body>
</html>
y un archivo test.js
'use strict';
class Test {
static hello() {
console.log("hello world");
}
}
export Test;
¿Por qué?
<script type="module"></script>asegurarse de agregar que, de lo contrario, obtendrá ese error. Me golpeaba la cabeza contra la pared continuamente haciendo a <script>import ... </script>sabiendas que ahora se dice que Chrome admite módulos ES6 sin banderas, luego noté que el atributo de tipo era necesario para especificar al navegador que este es un módulo ES6, sin el cual se obtiene exactamente error.
Respuestas:
Muchos navegadores modernos ahora admiten módulos ES6. Siempre que importe sus scripts (incluido el punto de entrada a su aplicación), su uso <script type="module" src="...">funcionará.
Eche un vistazo a caniuse.com para obtener más detalles: https://caniuse.com/#feat=es6-module
Puede probar los módulos ES6 en Google Chrome Beta (61) / Chrome Canary.
Implementación de referencia de ToDo MVC por Paul Irish - https://paulirish.github.io/es-modules-todomvc/
Tengo una demostración básica -
//app.js
import {sum} from './calc.js'
console.log(sum(2,3));
//calc.js
let sum = (a,b) => { return a + b; }
export {sum};
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>ES6</h1>
<script src="app.js" type="module"></script>
</body>
</html>
¡Espero eso ayude!
<script type="module"></script>asegurarse de agregar que, de lo contrario, obtendrá ese error. Me golpeaba la cabeza contra la pared continuamente haciendo a <script>import ... </script>sabiendas que ahora se dice que Chrome admite módulos ES6 sin banderas, luego noté que el atributo de tipo era necesario para especificar al navegador que este es un módulo ES6.
jsfuente).
Desafortunadamente, los módulos no son compatibles con muchos navegadores en este momento.
Esta característica apenas está comenzando a implementarse en los navegadores de forma nativa en este momento. Está implementado en muchos transpilers, como TypeScript y Babel, y paquetes como Rollup y Webpack.
Encontrado en MDN
funcionó para mí agregandotype="module" al script importmis mjs:
<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'
console.log(module.default()) // Prints: Hi from the default export!
</script>
Ver demostración: https://codepen.io/abernier/pen/wExQaa