web-dev-qa-db-fra.com

Quels navigateurs prennent en charge la syntaxe d'importation et d'exportation pour ECMAScript 6?

J'écris actuellement une application Web à l'aide de MEAN Stack et tente d'écrire du code en JavaScript ECMAScript 6; Cependant, des erreurs se produisent dans Chrome et Firefox lors de l'utilisation de la syntaxe d'importation et d'exportation. Existe-t-il actuellement des navigateurs prenant totalement en charge ECMAScript 6?

Remarque: je ne demande pas quand ECMAScript 6 sera pris en charge par les navigateurs. Je demande quels navigateurs prennent en charge la syntaxe d'importation et d'exportation ECMAScript 6. Voir https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla#Features_not_yet_supported_by_Firefox

javascriptecmascript-6es6-module-loaderbrowser-supportes6-modules
37
Gregory R.

Chrome et Firefox supportent les syntaxes import et export (il existe des tests pour -propreanalyse ). 

Ce qui n’est pas supporté, c’est le chargement de module - vous ne pouvez absolument pas charger un module, car sa spécification n’est pas complète. Pour cela, vous devez utiliser une sorte d’engageur de modules. Je ne suis pas développeur front-end, mais j'ai entendu de bonnes opinions sur Rollup de la part de mes collègues.

10
Ginden

Il est soutenu dans:

  • Safari 10.1  
  • Chrome 61
  • Firefox 54 - derrière le paramètre dom.moduleScripts.enabled dans about: config. 
  • Edge 16
29
Ali

Vous pouvez maintenant utiliser pollyfill pour importer le module ES6.

Je l'ai testé avec succès sur Chrome.

Voici le lien: http://github.com/ModuleLoader/browser-es-module-loader

Il est également implémenté de manière native dans Edge 14:

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

4
Supersharp

Comme d’autres l’ont dit, son soutien reste très limité. Mais même s'il y avait un support complet ... serait-il judicieux de l'utiliser? Comment ferions-nous cela?

Penses-y. Une application JS typique écrite avec des modules Node JS contient facilement des dizaines, voire des centaines de (très petits) packages. Voulons-nous vraiment autant de demandes? 

Browserify, Webpack, Rollup, etc. sont très populaires car ils nous permettent de regrouper de nombreux petits packages en un seul téléchargement rapide. Avec code splitting , nous pouvons laisser le groupe de modules décider au moment de la transpilation, en fonction du code utilisé par nos pages et de certains paramètres de configuration, le nombre de paquets à créer et le contenu de chacun. De cette façon, nous pouvons écrire de nombreux packages small et les utiliser sous forme de (gros) bundles.

Ce que je veux dire, c'est que nous devrions diviser notre code en packages qui fonctionnent bien sur le plan conceptuel, puis regrouper ces packages en ensembles fonctionnant bien au niveau technique (réseau). Si nous écrivons notre code en fonction de la taille optimale des paquets du réseau, nous finissons par sacrifier la modularité. 

En attendant, son utilisation ne fera probablement qu'ajouter à la confusion. Par exemple, regardez l'exemple sur le blog Edge:

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

Notez comment ils ajoutent l'extension .js à la chaîne from? Dans le noeud JS, nous écrivons généralement ceci comme:

import { sum } from './math';

Ainsi, le code ci-dessus fonctionnera-t-il également sur Edge? Et qu'en est-il des paquets nommés? Je crains que nous ne voyions beaucoup d'incompatibilités ici avant de savoir comment faire en sorte que ces chemins fonctionnent dans tous les domaines.

Je risquerais de deviner que pour la plupart des développeurs, System.import restera en grande partie invisible dans les navigateurs et que seul le logiciel de groupement lui-même commencera à l'utiliser (à des fins d'efficacité) lorsqu'il deviendra courant.

4
Stijn de Witt

Selon Le Guide de Style Javascript de Google : 

N'utilisez pas encore les modules ES6 (c'est-à-dire les mots clés export et import), comme leur sémantique n'est pas encore finalisée. Notez que cette politique sera être revisité une fois que la sémantique est entièrement standard.

// 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';

Cependant, import et export sont implémentés dans de nombreux transpileurs, tels que Traceur Compiler, Babel ou Rollup.

0
Gregory R.