es6 - javascript import js

¿Qué navegadores admiten la sintaxis de importación y exportación para ECMAScript 6?

Question

Actualmente estoy escribiendo una aplicación web usando MEAN Stack, y estoy intentando escribir código en JavaScript ECMAScript 6; sin embargo, recibo errores en Chrome y Firefox cuando uso la sintaxis de importación y exportación. ¿Existe actualmente algún navegador que sea totalmente compatible con ECMAScript 6?

Tenga en cuenta: no estoy preguntando cuándo ECMAScript 6 será compatible con los navegadores. Estoy preguntando qué navegadores admiten la sintaxis de importación y exportación de ECMAScript 6. Ver https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

Answer 1

Ahora hay un pollyfill que puede usar para importar el módulo ES6.

Lo probé con éxito en Chrome.

Aquí está el enlace: http://github.com/ModuleLoader/browser-es-module-loader

También se implementa de forma nativa en Edge 14:

https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond

Answer 2

Chrome y Firefox admiten export sintaxis de import y export (existen pruebas para proper parsing proper ).

Lo que no se admite es la carga del módulo: no puede cargar el módulo de ninguna manera, porque la especificación no está completa. Tienes que usar algún tipo de paquete de módulos para esto. No soy desarrollador front-end, pero he escuchado buenas opiniones sobre Rollup de mis compañeros de trabajo.

Answer 3

Como otros han dicho, el apoyo para esto todavía es muy limitado. Pero incluso si hubiera soporte completo ... ¿sería inteligente usarlo? ¿Cómo haríamos eso?

Piénsalo. Una aplicación JS típica escrita con módulos Node JS contiene fácilmente docenas, incluso cientos de paquetes (muy pequeños). ¿Realmente queremos tantas solicitudes?

Browserify, Webpack, Rollup, etc. son muy populares porque nos permiten agrupar muchos paquetes pequeños en una descarga rápida. Con la división de código , podemos dejar que el paquete de módulos decida en el momento de la transpilación, en función del código que nuestras páginas estén usando y en algunos ajustes de configuración, cuántos paquetes crear y qué poner en cada uno de ellos. De esa manera podemos escribir muchos paquetes pequeños y servirlos como (un par de) paquetes grandes.

Mi punto es que deberíamos dividir nuestro código en paquetes que funcionen bien en un nivel conceptual, luego agrupar esos paquetes en paquetes que funcionen bien en un nivel técnico (de red). Si escribimos nuestro código basado en el tamaño óptimo del paquete de red, terminamos sacrificando la modularidad en el proceso.

Mientras tanto, usarlo probablemente solo aumentará la confusión. Por ejemplo, mira el ejemplo en el blog de Edge:

import { sum } from ''./math.js'';

¿Observa cómo agregan la extensión .js a la cadena from ? En el Nodo JS, generalmente escribimos esto como:

import { sum } from ''./math'';

Entonces, ¿el código anterior también funcionará en Edge? ¿Y qué hay de los paquetes con nombre? Me temo que veremos mucha incompatibilidad aquí antes de descubrir cómo hacer que estos caminos funcionen en todos los ámbitos.

Me arriesgaría a adivinar que para la mayoría de los desarrolladores, System.import permanecerá en su mayoría invisible en los navegadores y que solo el software de agrupación comenzará a usarlo (para fines de eficiencia) cuando se convierta en la corriente principal.

Answer 4

De acuerdo con la Guía de estilo Javascript de Google :

No utilice todavía los módulos ES6 (es decir, las palabras clave de export e import ), ya que su semántica aún no está finalizada. Tenga en cuenta que esta política será revisada una vez que la semántica sea completamente estándar.

// Don''t do this kind of thing yet:
//------ lib.js ------
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from ''lib'';

Sin embargo, la import y export se implementan en muchos transpiladores, como Traceur Compiler, Babel o Rollup.

Answer 5

Es compatible con:

• Safari 10.1
• Cromo 61
• Firefox 54 : detrás de la configuración dom.moduleScripts.enabled en about: config.
• Borde 16