ES2015 Eksportuj wewnątrz funkcji

Question

Uczę się funkcji eksportu ES2015. Próbowałem zrozumienie go online, ale moje wątpliwości nie zostały jeszcze rozwiązane

Kiedy Oświadczam eksport wewnątrz anonimowej funkcji, jshint pokazuje następujący błąd (przynajmniej wewnątrz plugin IntelliJ):

deklaracja E053 Export musi być w zasięgu globalnym.

Wręcz przeciwnie, JSHint zawsze prosi o zawinięcie całego kodu wewnątrz funkcji anonimowej. Jeśli napiszę kod w następujący sposób:

export const MY_CONSTANT = 1000; 
(function(){ 
    'use strict'; 
    //Complete code goes here 
}(); 

Musimy napisać dużo kodu w górnej i dolnej części strony. Jakiś kod przeskoczy od pliku do początku (lub końca) strony.

Answer 1

Najlepszym sposobem na wyjaśnienie tego jest javascript IIFE było sposobem na tworzenie enkapsulacji. Umieszczasz kod swojego modułu wewnątrz jednego i zwracasz i obiekt jakiegoś rodzaju. Jeśli musisz zaimportować do niego kod, zrobiłbyś to z argumentem. Nowa składnia modułu pozwala zrobić to samo w inny sposób. Pomyśl o przywozie jako o argumentach IIFE i eksporcie jako o zwrocie. Oto pełne wyjaśnienie składni eksportu importu z Mozilli https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Co więcej, jeśli chcesz odkryć więcej, stworzyłem płytę, która używa babel, łyka, przeglądarki internetowej i jaśminu, dzięki czemu mogę napisać cały mój kod w przód jako es2015. https://github.com/jamesrhaley/es2015-babel-gulp-jasmine.git

Answer 2

Jeśli używasz składni modułu ES2015, prawdopodobnie nie musisz owijać kodu w funkcję anonimową, ponieważ moduł ładujący obsługuje kod, który jest eksportowany.

Nie jestem pewien co do każdego modułu ładującego, ale gdy używam TypeScript + browserify, każdy plik zostanie zawijany, aby zapobiec zmiennym zaśmiecaniu globalnej przestrzeni nazw. Zobacz Why must export import declarations be on top level in es2015, aby dowiedzieć się więcej o tym, jak pracować ze składnią modułu i dlaczego można deklarować zmienne globalnie.