Namespacing con IIFE in ES6?

Question

Apparentemente, ES6 doesn't need namespacing perché ogni file è un modulo separato.

Ma allora, come evitare l'interferenza globale nello spazio dei nomi?

Per esempio, Babel compila il mio file scripts/main.js semplicemente sostituendo const con var.

var alert = 'This line doesn\'t do anything.' 
 
window.alert(alert)

Un namespace (denominato ANS sotto) con un IIFE impedisce collisioni di nomi:

const ANS = (function() { 
 
    const alert = 'This works' 
 
    window.alert(alert + '.') 
 
    return {alert: alert + ' too.'} 
 
})() 
 
alert(ANS.alert)

Aggiunta proprietà allo spazio ANS è più pulita aggiunta loro al namespace globale, window o this. E l'IIFE fornisce ulteriori incapsulamenti.

Quindi, non è il secondo modo, ovvero la creazione di uno spazio dei nomi personalizzato con un IIFE, migliore del primo? Se è così, c'è un modo nuovo/più bello di farlo in ES2015? Perché Babel non fa questo per me?

Answer 1

Ma come evitare di sovrascrivere globalmente da un modulo?

Non è possibile. A questo riguardo, nulla è cambiato rispetto a ES5. Il consiglio è ancora: evitare l'uso di globals.

Answer 2

Apparentemente, ES6 non richiede il namespacing perché ogni file è un modulo separato.

Non esattamente. Ogni modulo ha il suo ambito, è corretto, ma non tutti i file sono un modulo. Esistono ancora script in ES6 che funzionano proprio come quelli di ES5 e vengono eseguiti nell'ambito globale.
In quegli script, è ancora necessario evitare globalmente il più possibile, in genere non dichiarando/assegnando alcuna variabile o avvolgendo il "modulo" in un IEFE per assegnargli un ambito variabile separato.

C'è un modo nuovo/più bello di farlo in ES6?

È possibile utilizzare un blocco e dichiarazioni di variabili lessicali (let, const, function):

{ 
    const msg = 'This line doesn\'t do anything.' 
    window.alert(msg); 
} 
// msg is not defined here 

In alternativa è possibile utilizzare una funzione di freccia nel vostro IEFE, che consentono di utilizzare this per riferirsi a l'oggetto globale senza bisogno di use .call(this)):

(() => { 
    var msg = 'This line doesn\'t do anything.' 
    window.alert(msg); 
})(); 

Ma allora, come evitare l'interferenza globale nello spazio dei nomi o il nome delle collisioni?

Nei moduli ES6, non c'è nulla di globale tranne gli oggetti incorporati e forse l'oggetto globale. Evita di modificarli.

E ovviamente dovrai preoccuparti delle collisioni tra i nomi dei moduli: come farlo dovrebbe essere spiegato nei documenti per il meccanismo di risoluzione del tuo caricatore di moduli.

Answer 3

Apparentemente, ES6 non richiede il namespaces perché ogni file è un modulo separato .

Questa è disinformazione. Per quanto ne so, solo i file che utilizzano export sono moduli ES6. Senza export, un file ES6 è solo uno script ordinario che ha accesso all'ambito globale a meno che non sia incluso in un IIFE o venga trasformato durante un processo di compilazione.

Revisione (12 luglio 2016): Apparentemente, ho corretto la disinformazione con maggiore disinformazione. Come Kyle Simpson clarifies below, "Secondo le specifiche attuali, ciò che rende un file un modulo ES6 è come l'ambiente (nodo, browser, ecc.) Sceglie di caricarlo, non il suo contenuto."

In You Do not Know JS: ES & Al di là, Kyle Simpson, alias @getify, afferma

"Moduli fanno ancora hanno accesso a finestra e tutti i "globali" che appendere fuori esso , non solo come ambito lessicale di alto livello, ma è davvero necessario che lo rimanga lontano dai globali nei moduli, se possibile. "

Ora alle vostre domande.

[I] sn't il secondo modo, vale a dire, la creazione di uno spazio dei nomi personalizzato con un IIFE, meglio del primo?

Dipende dall'ambiente in cui è in esecuzione il modulo. Ad esempio, in node, non esiste l'oggetto Window; pertanto, in quell'ambiente non è necessario preoccuparsi dei moduli che inquinano lo spazio dei nomi globale.

D'altra parte, nel browser, Window è un'API Web globale e il modulo può accedervi. Tecnicamente, tutto ciò che il tuo modulo si collega a Window non è, a rigor di termini, globale; tuttavia, tutto ciò che è collegato a Window è così vicino a un globale che in genere è considerato una cattiva pratica modificarlo tranne tramite Window.

[H] devo evitare l'interferenza globale nello spazio dei nomi?

e

[I] s là un/modo più nuovo più bello di fare questo in ES2015?

Non so quali sono le migliori pratiche per gestire l'ambito in ES6. Per il momento, faccio la seguente:

• Se un file è un modulo, è ambito di primo livello è il file stesso, quindi non riguardano me stesso con portata globale.
• Se un file non è un modulo, lo avvolgo in un IIFE.

Fonte: You Don't Know JS: ES & Beyond anche raccomandato: ES6 In Depth: Modules da Jason Orendorff

Answer 4

Inciampato qui attraverso Googling lo stesso problema. Supponendo che si utilizza un caricatore di modulo come il rollup, prova ad aggiungere questa riga per le opzioni di rollup:

format: 'iife'

Src: https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016/blob/master/rollup-plugin-babel/rollup.config.js#L9

Documenti: https://github.com/rollup/rollup/wiki/JavaScript-API#format