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

Está soportado en:

• Safari 10.1
• Cromo 61
• Firefox 54 – detrás del dom.moduleScripts.configuración habilitada en about: config.
• Borde 16

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

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

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

Browserify, Webpack, Rollup, etc. son tan populares porque nos permiten agrupar muchos paquetes pequeños en una descarga rápida. Con división de código podemos dejar que el módulo bundler decida en el momento de transpilación, basado en el código que nuestras páginas están utilizando realmente y en algunos ajustes de configuración, cuántos paquetes crear y qué poner en cada uno de ellos. De esta 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 Edge:

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

¿Nota cómo agregan la extensión .js a la cadena from? En el nodo JS usualmente 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 vamos a ver un montón de incompatibilidad aquí antes de que averigua cómo hacer que estos caminos funcionen en todos los ámbitos.

Me atreverí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 propio software de agrupación comenzará a usarlo (con fines de eficiencia) cuando se convierta en la corriente principal.

De acuerdo con Guía de Estilo Javascript de Google :

No utilice los módulos ES6 todavía (es decir, las palabras clave export y import ), ya que su semántica aún no está finalizada. Tenga en cuenta que esta política ser revisado 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, import y export se implementan en muchos transpilers, como el Compilador Traceur, Babel o Rollup.