Share
Oggi, ECMAScript 6 è in fase di completamento. ECMAScript è il fondamento di JavaScript e, quindi, esplorare le funzionalità proposte oggi significa anche che otteniamo un'anteprima di come scriveremo JavaScript nel prossimo futuro! In questo articolo, esploreremo dieci nuove funzionalità, con un focus significativo su strumenti, browser e transpilers.
JavaScript è stato originariamente sviluppato da Brendan Eich di Netscape e ufficialmente rilasciato come parte di Netscape Navigator 2.0 nel 1995. Un anno dopo, JavaScript è stato presentato all'ECMA International, un organismo che facilita la standardizzazione delle tecnologie dell'informazione e della comunicazione e dell'elettronica di consumo, in modo che può essere formalizzato dal punto di vista del settore. ECMAScript, quindi, divenne il nome del linguaggio di scripting standardizzato in ECMA-262.
Lo standard ECMAScript costituisce la spina dorsale di molti altri linguaggi derivati, compresi ActionScript e JScript. Nel corso degli anni, ECMAScript ha attraversato quattro versioni, con le discussioni di oggi che ruotano attorno alla versione sei, che è stata anche chiamata in codice, ECMAScript Harmony.
Prima di approfondire queste nuove funzionalità, è importante notare che lo standard ECMAScript costituisce la base di JavaScript. Esistono differenze numeriche tra ciascuna versione di JavaScript e le corrispondenti edizioni di ECMAScript. Questo per dire che JavaScript è compatibile con lo standard ECMAScript, pur fornendo più funzionalità. La tabella seguente riepiloga la relazione tra JavaScript ed ECMAScript:
| Versione JavaScript | Edizione ECMAScript | Anno |
| JavaScript 1.1 | Edizione ECMAScript 1 | 1997 |
| JavaScript 1.5 | ECMAScript edition 3 | 1999 |
| JavaScript 2.0 | ECMAScript Harmony | Lavori in corso |
JavaScript ha fatto molta strada dalle sue umili origini quasi vent'anni fa. Oggi gli sviluppatori stanno scrivendo migliaia di righe di codice per creare applicazioni JavaScript complesse. Prima di approfondire le caratteristiche dettagliate di ES6, potresti voler guardare al quadro generale definito nelle bozze delle specifiche, in termini di requisiti, obiettivi, mezzi e temi. Uno degli obiettivi per ES6 è quello di essere un linguaggio migliore per creare:
La tabella di compatibilità ES6 è molto utile, in quanto ci dice le funzionalità di ES6 supportate nel browser corrente. Ci fornisce anche un utile collegamento alle specifiche per ciascuna delle funzionalità elencate. Si noti che l'esistenza di alcune funzionalità potrebbe non significare la piena conformità con le specifiche. Quando lavori con Chrome, assicurati di abilitare i flag "Experimental JavaScript".
Ora che l'immagine grande è definita, esploriamo come possiamo implementarli. Nelle sezioni seguenti, discuteremo di dieci funzioni di ES6, utilizzando vari strumenti in modo che possiamo comprendere ES6 sia in teoria che in pratica. La conoscenza pregressa di JavaScript è un prerequisito, quindi sentiti libero di controllare molte risorse su JavaScript.
Di seguito sono elencate le funzionalità che eseguiremo con uno strumento diverso. Provali uno per uno o passa alla funzione specifica che desideri esplorare:
Accentsconagua
permettere [usando il browser Firefox]const [utilizzando il browser Chrome]permettere permettere Le variabili JavaScript hanno un ambito funzionale. Ciò significa che, anche se ci sono variabili dichiarate in un blocco annidato, sono disponibili in tutta la funzione. Esaminiamo un breve esempio qui sotto; utilizzeremo semplicemente la console Web in Firefox o Chrome per eseguirli. Quale pensi che sarà il valore di jsFuture?
var jsFuture = "es6"; (function () if (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());
Nell'esempio sopra, il valore di jsFuture nel console.log la dichiarazione sarà "es5". Fondamentale per la tua comprensione è il fatto che, in JavaScript, le dichiarazioni delle variabili sono issate in alto, ma le inizializzazioni variabili, d'altra parte, non lo sono. Quindi, indipendentemente da dove le variabili sono inizializzate e dichiarate, all'interno dell'ambito della funzione, saranno sempre issate. Il frammento di seguito è esattamente lo stesso - con i commenti per illustrare questa funzione di sollevamento variabile.
var jsFuture = "es6"; (function () // var jsFuture = undefined; // sollevamento della variabile if (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); // "es5" ());
ES6 affronta questo problema con permettere, che è come var, tranne per il fatto che è a scope di blocco invece di scope della funzione. Consideriamo un altro esempio con var sotto. Chiamando la funzione es [6] () ci darà il valore di i = 10. Si noti che, anche se var i = 0; è dichiarato nel per loop, l'ambito di var i predefinito su globale. Quindi, quando la funzione es [6] () viene eseguito, il valore di io è 10.
var es = []; per (var i = 0; i < 10; i++) es[i] = function () console.log("Upcoming edition of ECMAScript is ES" + i); ; es[6](); // Upcoming edition of ECMAScript is ES10 
Usiamo ora permettere. Per risolvere il problema, utilizzeremo Firefox e apriremo la console Web attraverso il menu (Strumenti> Sviluppatore Web> Console Web). Creazione di una variabile nell'ambito del blocco all'interno di per ciclo continuo, sia c = i; lo ha reso a blocchi.
var es = []; per (var i = 0; i < 10; i++) let c = i; es[i] = function () console.log("Upcoming edition of ECMAScript is ES" + c); ; es[6](); // Upcoming edition of ECMAScript is ES6 
Firefox supporta già molte delle prossime funzionalità di ES6. Fare riferimento alla tabella di conformità per Firefox per rimanere aggiornato su quali funzionalità sono supportate e quali sono anche conformi alle specifiche correnti.
const const Le definizioni costanti sono ora possibili con const. permettere e const si comportano allo stesso modo nel senso che entrambi sono a blocchi, ma con const, i valori sono di sola lettura e non possono essere dichiarati nuovamente in seguito. Esaminiamo un semplice esempio di codice in Chrome:
classe Nei linguaggi di programmazione orientati agli oggetti, a classe è una rappresentazione di un oggetto. Forma il modello, mentre un oggetto è un'istanza di una classe. Riguardo a JavaScript, è un linguaggio di programmazione senza classi e tutto è un oggetto. Tradizionalmente, abbiamo usato funzioni e prototipi per implementare le classi. Esaminiamo un modo comune per implementare la classe in ES5.
var Language = function (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "è stato creato da" + this.founder + "in" + this.year; ;
Successivamente, vediamo come ES6 implementa le classi con una sintassi di dichiarazione di classe minima che può essere estremamente importante per distinguere classi e funzioni. Per programmare classe usando la sintassi ES6, useremo Traceur di Google, che è un traspolatore che compila il codice ES6 in ES5. Innanzitutto, creiamo il html struttura del file all'interno della quale inseriremo la sintassi ES6 per le classi. Per compilare il codice Traceur, abbiamo bisogno di entrambi traceur.js per compilare Traceur su JavaScript, così come bootstrap.js per legarli tutti Alla fine, Traceur cercherà script type = "text / traceur" tag per compilare il codice pertinente all'interno dei tag in JavaScript vaniglia.
Classi ES6
Successivamente, all'interno del script type = "text / traceur" tag, usiamo la sintassi ES6 per implementare la stessa classe per cui abbiamo precedentemente fatto linguaggio.
class Language costruttore (nome, fondatore, anno) this.name = nome; this.founder = founder; questo.anno = anno; summary () return this.name + "è stato creato da" + this.founder + "in" + this.year;
Ora possiamo creare un'istanza di Linguaggio di classe aprendo il file HTML nel browser Chrome come var js = nuova lingua. Nella console, vedremo anche le richieste per altre proprietà della lingua!
Con una dichiarazione di sintassi così chiara, possiamo anche passare ad estendere la classe per implementare una sottoclasse metalinguaggio che erediterà tutte le proprietà dalla classe genitore linguaggio. All'interno della funzione di costruzione, verrà richiesta la funzione super chiamerà il costruttore della classe genitore in modo che sia in grado di ereditare tutte le sue proprietà. Infine, possiamo anche aggiungere proprietà extra, come ad esempio versione, come illustrato nel codice qui sotto. Esaminiamo la sintassi ES6 ed eseguiamola nel browser Chrome:
classe MetaLanguage estende Language costruttore (x, y, z, versione) super (x, y, z); this.version = versione;
Traceur è un transpiler utile che ci permette di codificare usando la sintassi ES6, mentre facciamo il pesante sollevamento per noi per ricostruirlo alla versione JavaScript corrente. Prova anche altre funzionalità di ES6 in Traceur!
parametri di funzione predefiniti Con i parametri di funzione predefiniti, possiamo sempre avere parametri di funzione come opzione impostando alcuni valori di default. La sintassi per questa funzione in ES6 è estremamente intuitiva. I parametri predefiniti sono definiti quando le funzioni sono definite. Diamo un'occhiata alla sintassi ES6 di seguito in un nuovo file TypeScript con un'estensione di * .ts.
cronologia delle funzioni (lang = "C", anno = 1972) return lang + "è stato creato intorno all'anno" + anno;
Successivamente, installeremo TypeScript come modulo npm ed eseguiremo il file .* ts e compilarlo su vanilla JavaScript. Ecco i comandi di installazione e quindi compilazione nella riga di comando:
$ npm install -g typescript $ npm view typescript versione 0.8.3 $ tsc 4-default-params.ts
Il comando sopra creerà un file JavaScript vanigliato, chiamato 4-default-params.js, che può quindi essere chiamato da un file HTML. Ecco il semplice file HTML che chiamerà il file JavaScript esterno creato dal compilatore TypeScript:
ES6 Parametri predefiniti
Infine, apriremo il file HTML in Chrome / Firefox e richiameremo la funzione storia() due volte, con e senza i parametri della funzione. Si noti che il passaggio di alcun parametro di funzione non tornerà ai parametri predefiniti:
Controlla le altre funzionalità di TypeScript, incluso classe oppure segui un'esercitazione su TypeScript per un uso più approfondito.
ES6 offre nuove strutture dati precedentemente non disponibili in JavaScript. Prima di passare all'esplorazione di due strutture di questo tipo (Set e Mappe), vediamo come possiamo eseguire la sintassi ES6 con NodeJS. Installa NodeJS; da qui in poi, lavoreremo nella riga di comando. In primo luogo, controlleremo la versione di NodeJS installata, quindi controlleremo quali opzioni abiliteranno le funzionalità di ES6 con il comando node --v8-options | armonia di grep.
$ node --version v0.10.4 $ node --v8-options | grep harmony --harmony_typeof (abilita la semantica dell'armonizzazione per typeof) --harmony_scoping (abilita lo scope scope dell'armonia) --harmony_modules (abilita i moduli harmony (implica scope scope)) --harmony_proxies (abilita i proxy dell'armonia) --harmony_collections (abilita le raccolte dell'armonia ( insiemi, mappe e mappe deboli)) --harmony (abilita tutte le funzioni di armonia (tranne typeof))
Successivamente, avviare il NodeJS repl e interrogare quali proprietà sono disponibili per Set e Maps. Iniziamo con il sostituire NodeJS nodo - armonia per abilitare tutte le funzionalità di ES6.
$ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'add', 'has', 'delete']> Object.getOwnPropertyNames (Map.prototype) ['constructor', 'get', ' imposta ',' ha ',' elimina ']> .exit $
Gli insiemi sono semplici strutture di dati che sono simili agli array, ma ogni valore è unico. Creiamo un nuovo file, chiamato 5-sets.js, e inserisci del codice per creare, aggiungere, eliminare e interrogare il nuovo set che creeremo. Inoltre, tieni presente che aggiungeremo i dati "Hippo" due volte, ma nel set, verrà registrato solo una volta!
var engines = new Set (); // crea il nuovo Set engines.add ("Gecko"); // aggiungi a Set engines.add ("Trident"); engines.add ( "Webkit"); engines.add ( "Hippo"); engines.add ( "Hippo"); // nota che Hippo viene aggiunto due volte console.log ("I motori del browser includono Gecko?" + engines.has ("Gecko")); // true console.log ("I motori del browser includono Hippo?" + engines.has ("Hippo")); // true console.log ("I motori del browser includono Indigo?" + engines.has ("Indigo")); // false engines.delete ("Hippo"); // elimina item console.log ("Hippo viene eliminato. I motori del browser includono Hippo?" + engines.has ("Hippo")); // falso Esegui il file nel nodo repl con il comando node --harmony 5-set.js. Nota che, anche se "Hippo" è stato aggiunto due volte sul set, dopo averlo eliminato, il set non lo includeva più. Ciò dimostra ancora una volta che un set è una struttura dati che può contenere solo valori univoci.
Le mappe sono abbastanza simili alle coppie chiave-valore dell'oggetto JavaScript. Usando una chiave univoca, possiamo recuperare il valore. In ES6, la chiave può essere qualsiasi tipo di dati JavaScript e non solo stringhe. Questa è la parte interessante! Creiamo un nuovo file, chiamato 5-map.js, per provare le funzionalità di creazione, acquisizione ed eliminazione:
var es6 = new Map (); // crea una nuova mappa es6.set ("edizione", 6); // key is string es6.set (262, "standard"); // key è il numero es6.set (non definito, "nah"); // key is undefined var hello = function () console.log ("ciao");; es6.set (ciao, "Ciao ES6!"); // key è function console.log ("Valore di 'edizione' termina?" + es6.has ("edizione")); // true console.log ("Valore di 'anno' termina?" + es6.has ("anni")); // false console.log ("Valore di 262 uscite?" + es6.has (262)); // true console.log ("Valore delle uscite non definite?" + es6.has (non definito)); // true console.log ("Valore di hello () termina?" + es6.has (ciao)); // true es6.delete (indefinito); // cancella la mappa console.log ("Valore delle uscite non definite?" + es6.has (non definito)); // false console.log (es6.get (hello)); // Ciao ES6! console.log ("Lavori in corso per ES" + es6.get ("edizione")); // I lavori sono in corso per ES6 
Come mostrato nelle funzioni delle raccolte ES6, l'opzione di armonia NodeJS supporta già altre funzionalità di ES6 come scope scope, proxy e moduli. Provali anche su NodeJS!
Nei linguaggi di programmazione, il termine "destrutturazione" indica la corrispondenza del modello. In ES6, possiamo fare alcuni abbinamenti di pattern piuttosto belli in array e oggetti che in precedenza ci avrebbero portato più di un passaggio. Esploriamo alcuni di loro codificandolo nella console web di Firefox.
Con la distruzione dell'array, possiamo inizializzare le variabili contemporaneamente, o anche scambiarle invece di avere il modo convenzionale di creare un var temp; variabile temporanea.
var [start, end] = ["earth", "moon"] // inizializza console.log (start + "calling" + end); // earth calling moon [start, end] = [end, start] // scambio variabile console.log (start + "calling" + end); // luna che chiama terra
Anche la destrutturazione diventa una utile stenografia quando si restituiscono più valori da una funzione, poiché non è più necessario avvolgere un oggetto. Inoltre, per saltare determinate variabili, lascia vuoto l'elemento dell'array:
function equinox () return [20, "March", 2013, 11, 02]; var [date, month,,,] = equinox (); console.log ("L'equinozio di quest'anno era in" + data + mese); // L'equinozio di quest'anno era il 20 marzo 
A causa della destrutturazione, le variabili possono anche essere inizializzate da un oggetto che viene restituito da una funzione anche con oggetti profondamente annidati. Inoltre, proprio come i modelli di array, possiamo saltare quelli non necessari. Ecco lo snippet di codice che illustra proprio questo:
function equinox2 () return date: 20, month: "March", anno: 2013, ora: hour: 11, // minute nested: 2; var date: d, month: m, time: hour: h = equinox2 (); // h ha il valore della proprietà nidificata mentre "year" e "minute" vengono saltati completamente in console.log ("L'equinozio di quest'anno era su" + d + m + "a" + h); // L'equinozio di quest'anno era il 20 marzo alle 11 
In ES6, i parametri di riposo ci consentono di utilizzare facilmente alcuni parametri fissi in una funzione, insieme al resto del numero finale e variabile dei parametri. Noi già usiamo argomenti, che è un oggetto tipo array che definisce gli argomenti passati a una funzione, ma chiaramente non possiamo usare la funzione array per manipolare questi argomenti. Con una chiara sintassi in ES6, sposta anche l'intento dello sviluppatore nel livello di sintassi con tre punti ... per denotare un numero variabile di argomenti.
Proviamo ad usare i parametri di riposo nella sintassi ES6 con gruntjs e il suo plugin per il transpiler traceur, che abbiamo usato nella sezione precedente.
Installa utility della riga di comando grunt:
$ npm uninstall -g grunt $ npm install -g grunt-cli
Crea un file, chiamato package.json, che definirà i vari moduli necessari per eseguire Grunt. Nota che questo elenco di dipendenze include il plugin traceur:
"name": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
Crea il Gruntfile.js che conterrà solo un compito traceur che convertirà la sintassi ES6 in JavaScript di oggi. Con questo, saremo in grado di provare i parametri di riposo ES6.
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), traceur: custom: files: 'js /': ['rest-spread.js '] // dest: [file sorgente]); grunt.loadNpmTasks ( 'grunt-traceur'); grunt.registerTask ('default', ['traceur']); ; Crea un semplice index.html chiamare il file JavaScript compilato da traceur, JS / Rest-spread.js:
ES6 Parametri di riposo
Ancora più importante, creeremo il file Rest-spread.js, che conterrà la sintassi del parametro rest:
function push (array, ... items) // definizione dei parametri di riposo con elementi di sintassi a 3 punti.forEach (function (item) array.push (item); console.log (item);); // 1 fisso + 4 parametri variabili var pianeti = []; console.log ("I pianeti interni del nostro sistema solare sono:"); spinta (pianeti, "Mercurio", "Venere", "Terra", "Marte"); // parametri di riposo Finalmente, correremo grugnito nella riga di comando, che, per impostazione predefinita, eseguirà l'attività traceur e creerà il file, js / 5-riposo-spread.js. Quindi, basta visualizzare il file index.html nella console del browser:
$ npm install $ grunt ╰─ $ grunt Esecuzione "traceur: custom" (traceur) task js / ['rest-spread.js'] Compilazione ... js / Compilation riuscita - js / Writing ... js / js / rest-spread.js riuscito. Scrittura riuscita - [oggetto oggetto]
Un operatore di spread è l'opposto dei parametri di riposo. Quando si chiama una funzione, possiamo passare l'argomento fisso che è necessario insieme a una matrice di una dimensione variabile con la nota sintassi a tre punti, per indicare il numero variabile di argomenti.
Utilizzeremo lo stesso progetto dei precedenti parametri di riposo e aggiungeremo il codice operatore di spread al file Rest-spread.js. Nell'esempio seguente, la funzione richiede sei argomenti separati. Quando si chiama la funzione, i dati vengono passati come una matrice con l'operatore di diffusione. Vediamo come appare la sintassi, quando si chiama la funzione con argomenti fissi e un numero variabile di argomenti:
Aggiungere il codice operatore di spread a Rest-spread.js:
// Operatore di spargimento "... weblink" function createURL (commento, percorso, protocollo, sottodominio, dominio, tld) var shoutout = comment + ":" + protocol + ": //" + sottodominio + "." + dominio + "." + tld + "/" + percorso; console.log (shoutout); var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Il primo sito Web al mondo"; createURL (commento, ... collegamento); // operatore di spread
Eseguire la compilazione traceur tramite l'attività Grunt nella riga di comando e visualizzare il file, index.html, nel browser:
$ grunt Esecuzione di "traceur: custom" (traceur) task js / ['rest-spread.js'] Compilazione ... js / Compilation riuscita - js / Scrittura ... js / js / rest-spread.js riuscito. Scrittura riuscita - [oggetto oggetto] Fatto, senza errori.
Se stai già usando GruntJS come strumento di costruzione nel tuo progetto attuale, sarà facile integrarlo con i plugin ES6. Quindi prova altri plugin relativi a ESS GruntJS per compilare la sintassi ES6 con JavaScript corrente.
Offerte JavaScript per-in per l'iterazione, ma ha alcune limitazioni. Ad esempio, in una iterazione dell'array, i risultati con a per-in il ciclo ci darà gli indici e non i valori. Diamo un'occhiata al codice qui sotto per illustrare questo:
var pianeti = ["Mercurio", "Venere", "Terra", "Marte"]; for (p in planet) console.log (p); // 0,1,2,3 var es6 = edition: 6, comitato: "TC39", standard: "ECMA-262"; for (e in es6) console.log (e); // edizione, commissione, standard
Proviamo lo stesso concetto, ma, questa volta, con per-di con un array, un set e una mappa:
var pianeti = ["Mercurio", "Venere", "Terra", "Marte"]; for (p of planets) console.log (p); // Mercury, Venus, Earth, Mars var engines = Set (["Gecko", "Trident", "Webkit", "Webkit"]); for (var e of engines) console.log (e); // Set ha solo valori univoci, quindi Webkit mostra solo una volta var es6 = new Map (); es6.set ("edizione", 6); es6.set ("comitato", "TC39"); es6.set ("standard", "ECMA-262"); per (var [nome, valore] di es6) console.log (nome + ":" + valore); 
Le comprensibilità delle matrici ci forniscono una sintassi abbreviata per manipolare ciascuno dei contenuti dell'array in un determinato modello. È molto simile al carta geografica() o filtro() metodi disponibili nell'oggetto Array. Esaminiamo come stiamo usando carta geografica()
var temperatura = [0, 37, 100]; function degToKelvin (deg) return deg + 273; temperature.map (degToKelvin); // [273, 310, 373]
Analizziamo la stessa funzionalità in Firefox per vedere la sintassi abbreviata in ES6 per creare array con fino a tre loop per creare possibili soluzioni per il gioco, Cluedo:
// Matrice creata con 1 ciclo var temperatura = [0, 37, 100]; [t + 273 per (t di temperatura)]; // [273, 310, 373] // Matrice creata con 3 loop var suspects = ["Miss Scarlet", "Colonel Mustard"], weapons = ["Candlestick", "Dagger"], rooms = ["Kitchen", "Sala da ballo"]; [(console.log (s + "con a" + w + "in" + r)) per (s di sospetti) per (w di armi) per (r di stanze)];
Nei linguaggi di programmazione, i moduli eseguono funzioni discrete isolate e sono indipendenti l'uno dall'altro. Ciò aiuta non solo a costruire componenti riutilizzabili nei progetti, ma mantiene anche gli errori isolati nelle parti correlate al progetto corrente. Abbiamo creato moduli in JavaScript in genere con AMD o CommonJS. Creiamo un semplice modulo usando la sintassi ES6 e il transpiler ES6 Module.
Per prima cosa, creiamo il file HTML, index.html, che chiamerà i JavaScripts essenziali. Useremo RequireJS come un caricatore AMD; quindi, ci riferiamo a una copia CDN dell'ultimo file RequireJS. Successivamente, aggiungiamo anche l'attributo, Dati-principale, sul copione tag per dire a RequireJS di caricare il file JS / Init.js file.
Moduli ES6
Ora creeremo il file, JS / Init.js, che invocherà solo il JS / main.js file:
require (['main'], function () );
Crea il modulo, cerchio, nel file, in / circle.js, nella sintassi ES6. Questo modulo esporta due funzioni:
area delle funzioni di esportazione (raggio) raggio di ritorno di Math.PI * raggio *; circonferenza della funzione di esportazione (raggio) ritorno 2 * raggio Math.PI *;
Crea il file, in / main.js, che importerà il modulo cerchio in modo che possiamo usare le funzioni di quel particolare modulo. Notare il importare sintassi:
importa area, circonferenza da 'cerchio'; console.log ("Area del cerchio:" + area (4) + "metro quadrato"); console.log ("Circonferenza del cerchio:" + circonferenza (14) + "metri"); A questo punto, la struttura delle cartelle è mostrata sotto. Useremo il traspolatore del modulo ES6 per creare codice compatibile ES5 con due file appena creati: JS / circle.js e JS / main.js.
$ albero. | - in | | - circle.js | '- main.js | - index.html' - js '- init.js
Installa il Transpiler del modulo ES6:
$ npm installa https://github.com/square/es6-module-transpiler.git $ compile-modules --help
Infine, trasporriamo questi due file. Passare alla cartella, nel, dalla riga di comando:
$ compile-modules circle.js --type amd --to ... / js $ compile-modules main.js --type amd --to ... / js $ cd ... $ tree. | - in | | - circle.js | '- main.js | - index.html' - js | - circle.js | - init.js '- main.js
Guarda il codice transpiled nei file JS / circle.js e JS / main.js. Ora apriremo il file, index.html, nel browser per vedere i moduli in azione! Dovremo utilizzare un server web per eseguire questo file. Sto usando Python SimpleHTTPServer. Passare alla riga di comando nella directory principale del file, index.html:
$ python -m SimpleHTTPServer 8000
Molti dei membri della nostra community di sviluppo web hanno apertamente condiviso su ES6 e cosa sta s
