web-dev-qa-db-fra.com

Prise en charge d'ES6 (ECMAScript 2015) à partir de 2018

En tant que programmeur de longue date qui s’intéresse tout d’abord à la programmation JavaScript, j’ai les questions suivantes qui restent floues malgré la lecture de nombreux articles. 

pour le code suivant,

class Animal {
    constructor(public name) { }
    move(meters) {
        console.log(this.name + " moved " + meters + "m.");
    }
}

class Snake extends Animal {
    move() {
        console.log("Slithering...");
        super.move(5);
    }
}

class Horse extends Animal {
    move() {
        console.log("Galloping...");
        super.move(45);
    }

var sam = new Snake("Sammy the Python")
var tom: Animal = new Horse("Tommy the Palomino")

sam.move()
tom.move(34)

Doit-il être transpilé dans un formulaire compatible ES5 pour fonctionner avec Node.js ou non? 

Enfin, un site en ligne que je peux essayer de jouer avec le code TypeScript/ES6 comme ci-dessus? 

  • Je le copie sur ma console Chrome et j'ai une erreur que je ne comprends pas - Unexpected strict mode reserved Word, et
  • Je l’ai essayé sur http://www.typescriptlang.org/play/index.html , mais la sortie console ne fonctionne pas. 

S'il vous plaît aider. THX. 

javascriptnode.jstypescript
5
xpt

En regardant le support de ES6 (ECMAScript 2015) par les navigateurs, je peux voir que le niveau de support est bien inférieur à celui de Node.js, la question est donc:

De nombreux navigateurs et moteurs Javascript différents, chacun avec son propre niveau de prise en charge ES6. La dernière version de node.js est généralement assez récente sur ce que le moteur V8 prend en charge. De nombreux navigateurs ont des cycles de publication plus longs et peuvent ne pas être aussi récents, mais chacun est différent et a sa propre stratégie de publication et son propre niveau de support ES6.

Si Node.js et les navigateurs utilisent le moteur V8 moderne, pourquoi les niveaux de prise en charge sont-ils si différents?

Si vous comparez la dernière version de node.js à la dernière version de Chrome sous Windows, vous ne verrez pas beaucoup de différence dans la prise en charge. Le tableau de prise en charge de l'ES6 que vous consultez vous semble vieux. Par exemple, Chrome supporte depuis longtemps l’objet Set, mais votre graphique indique false.

En regardant le support ES6 dans Node.js, je peux voir vraiment que très peu de fonctionnalités ES6 ne sont pas supportées maintenant. Cependant, que signifie exactement le supporté dans le graphique? C'est à dire.,

Pris en charge signifie que vous pouvez utiliser directement la fonctionnalité sans transpiler, mais son exactitude dépend de la source du document la revendiquant. Certains documents effectuent des tests approfondis de tous les cas Edge d’une fonctionnalité donnée. D'autres cherchent simplement une mise en œuvre générale. Ainsi, si, par exemple, vous recherchez une prise en charge de l’objet Set et que celle-ci indique «pris en charge», cela signifie donc que vous pouvez simplement écrire du code Javascript simple qui utilise l’objet Set et que cela fonctionnera. La précision de ce document dépend de la source de leurs données et de la minutie de leurs tests.

Est-ce que cela signifie que même si j'écris en utilisant les fonctionnalités de support ES6, je dois toujours utiliser le compilateur Babel pour compiler le code ES6 en ES5 pour que Node.js puisse l'utiliser?

Dans un moteur Javascript prenant en charge une fonctionnalité donnée dans ES6, vous pouvez écrire du code ES6 pour cette fonctionnalité et l'exécuter directement dans ce moteur Javascript. Aucune transposition n'est nécessaire.

Pour le code JavaScript de type TypeScript ES6 qui s'exécute pour Node.js, ils doivent encore être transpilés en un formulaire compatible ES5, même si Node.js couvre presque toutes les fonctionnalités d'ES6, n'est-ce pas? C'est à dire.,

Les définitions de classe que vous affichez sont du code ES6 simple. Ceux-ci fonctionneront parfaitement comme dans un moteur Javascript compatible ES6.

Si vous écrivez du code TypeScript, vous devrez alors transpiler le TypeScript en Javascript car aucun moteur Javascript (à ma connaissance) ne prend en charge le typeScript directement. Lorsque vous transpilez un formulaire TypeScript en Javascript, vous pouvez généralement spécifier si vous souhaitez que le transpiler génère un code compatible ES5 (qui s'exécutera dans un moteur ES5 ou ES6) ou un code compatible ES6 (qui s'exécutera uniquement dans un moteur ES6) en fonction de ce dont votre environnement cible est capable.

Doit-il être transpilé dans un formulaire compatible ES5 pour fonctionner avec Node.js ou non?

Votre code particulier semble contenir au moins une déclaration de variable de style TypeScript à transpiler. Le reste ressemble à du javascript ES6 qui devrait fonctionner dans n'importe quel moteur ES6 sans transpiler.

Lorsque je supprime TypeScript, corrige quelques erreurs de syntaxe dans votre code et implémente correctement le constructeur Animal, ce code fonctionne alors très bien dans node.js v8.8.1 (ce que j’ai actuellement installé) et dans Chrome 63.0.3239.132, Edge 41.16299. .15.0 et Firefox 57.0.4 tous sur Windows 10:

    // Generic ES6 code

    class Animal {
        constructor(name) { 
            this.name = name;
        }
        move(meters) {
            console.log(this.name + " moved " + meters + "m.");
        }
    }
    
    class Snake extends Animal {
        move() {
            console.log("Slithering...");
            super.move(5);
        }
    }
    
    class Horse extends Animal {
        move() {
            console.log("Galloping...");
            super.move(45);
        }
    }
    
    var sam = new Snake("Sammy the Python");
    var tom = new Horse("Tommy the Palomino");
    
    sam.move();
    tom.move(34);

Vous pouvez exécuter vous-même cet extrait dans le navigateur de votre choix pour voir les résultats (en supposant que le navigateur est suffisamment moderne pour prendre en charge un extrait de dépassement de pile). Cela fonctionne dans toutes les versions actuelles des navigateurs que j'ai, à l'exception de IE 11.192.16299.0 (ce n'est pas surprenant que IE ne prend pas en charge ES6).

Je le copie sur ma console Chrome et j'ai une erreur que je ne comprends pas - Mode strict inattendu réservé Word,

Cela m’est arrivé lorsque j’ai essayé d’exécuter votre code dans node.js jusqu’à ce que j’en retire le TypeScript afin qu’il s’agisse tout simplement de l’ES6. Je pense que cette erreur particulière est causée par la public dans cette ligne:

constructor(public name) { }

puisque cela ne fait pas partie de la spécification ES6 (cela fait apparemment partie de TypeScript).

Il semblerait que vous vouliez poser une question, mais que vous n’ayez pas formulé exactement la question suivante: "Comment savoir si vous devez transpiler ou non?".La réponse est que vous devez comprendre le croisement entre les environnements cibles que vous souhaitez exécuter et les fonctionnalités les plus récentes que vous prévoyez d’utiliser. Si vous écrivez du code côté serveur qui ne fonctionnera que dans node.js, c'est beaucoup plus simple. Examinez un tableau complet tel que http://node.green/ , étudiez ce qu’il dit pour la version de node.js que vous prévoyez d’utiliser et la fonctionnalité en question. Si cela indique que vous devriez pouvoir utiliser cette fonctionnalité, écrivez votre code à l'aide de cette fonctionnalité, écrivez un scénario de test pour celui-ci et vérifiez que le code que vous avez écrit et la fonctionnalité que vous utilisez sont valables. Ajoutez cela à votre corpus de connaissances sur ce que vous pouvez et ne pouvez pas utiliser dans cette version de node.js. Vous pouvez ensuite supposer que toutes les versions futures de node.js prendront également en charge cette fonctionnalité.

Si vous écrivez du code pour fonctionner dans un navigateur, la vie est beaucoup plus compliquée. Si vous envisagez de prendre en charge de nombreux navigateurs et que vous ne voulez vraiment pas vous soucier de la prise en charge de ES6, transférez-vous simplement vers une cible ES5 et allez à votre entreprise.

Si vous souhaitez utiliser du code non transpilé, vous devez effectuer de nombreux tests dans de nombreux navigateurs. Vous devez d’abord spécifier avec précision les versions des navigateurs que vous allez prendre en charge, puis écrire votre code et vos scénarios de test. Vous devez également tester dans chaque navigateur que vous envisagez de prendre en charge. Il n'y a vraiment pas de raccourci. Lorsque vous trouvez des problèmes qui ne fonctionnent pas, vous devez rechercher des remplissages multiples ou des solutions de contournement ou cesser d'utiliser cette fonctionnalité ES6.

If you want to use non-transpiled code, then you have a lot of testing to do in a lot of browsers. You have to first specify exactly which versions of which browsers you are going to support and then you have to write your code and test cases and you have to test in every browser you plan to support. There really is no shortcut. When you find things that don't work, you'll have to either look for polyfills or work-arounds or stop using that ES6 feature.

11
jfriend00

Testez le code dans les environnements dans lesquels il va être utilisé. Utilisez les moyens disponibles pour implémenter la norme ou la spécification spécifique dans l'environnement où vous utilisez le code. Ou essayez de créer vous-même une approche pour résoudre un problème que vous rencontrez lors du développement de votre code tout en notant les progressions et le problème persistant afin que les autres puissent éventuellement résoudre et résoudre le problème, le bogue ou l'exigence de leur propre point de vue. 

Le simple fait que le document indique que le navigateur a mis en œuvre une spécification ou une norme ne signifie pas que la mise en œuvre est cohérente avec la spécification, ou même mise en œuvre. Le seul moyen de vérifier si un navigateur implémente une norme consiste à tester vous-même le code. Problèmes de fichiers et tentative de correction des bogues vous-même.

Les navigateurs utilisent différents moteurs, notamment Gecko , WebKit , pas V8 seul; et peut changer au fil du temps, tant dans le nom que dans la mise en œuvre des spécifications; voir Surveiller et potentiellement déconseiller la prise en charge de la prise en charge multipiste de SourceBuffer de 'séquence' AppendMode ; Comment utiliser le mode "segments" sur SourceBuffer de MediaSource pour obtenir le même résultat sur Chomium, Chorme et Firefox? . Il y a beaucoup de navigateurs. Par exemple, Lynx n'utilise pas la version 8. 

Voir tests de plate-forme Web

Le projet de plate-forme Web est une tentative coordonnée par le W3C pour créer un fichier suite de tests inter-navigateurs pour la pile Web-platform. Écrire des tests dans un manière qui leur permet de fonctionner dans tous les navigateurs donne des projets de navigateur l'assurance qu'ils livrent un logiciel compatible avec d’autres implémentations, et que les implémentations ultérieures seront compatibles avec leurs implémentations. Ceci à son tour donne Web Les auteurs/développeurs sont convaincus qu'ils peuvent réellement compter sur le Web plate-forme pour tenir la promesse de travailler avec les navigateurs et dispositifs sans avoir besoin de couches supplémentaires d’abstraction sur le papier par-dessus le lacunes laissées par les éditeurs de spécifications et les implémenteurs.

Par exemple, un test pour Web Speech API , où la propriété volume est définie comme pouvant être définie, n'a pas été en mesure de détecter un changement de sortie audio pour Chromium ou Firefox lors de la définition de la propriété volume de SpeechSynthesisUtterance valeurs dans les plages spécifiées. 

Les spécifications sont un régime totalement différent des implémentations réelles du navigateur. Les spécifications ou les normes peuvent être et sont écrites bien avant l’implémentation réelle du navigateur, si elle est appliquée. Vous pouvez utiliser browserify , ou écrire le code vous-même pour utiliser des modules NodeJS ou un autre code non natif dans le navigateur. 

0
guest271314