Korzystanie Z Węzła.js require vs. ES6 import / eksport

Istnieje kilka zastosowań / możliwości, które warto rozważyć:

Require:

• możesz mieć dynamiczne ładowanie tam, gdzie załadowana Nazwa modułu nie jest predefiniowane / statyczne, lub gdy warunkowo wczytujesz moduł tylko wtedy, gdy jest to " naprawdę wymagane "(w zależności od pewnego przepływu kodu).
• ładowanie jest synchroniczne. Oznacza to, że jeśli masz wiele require s, są one ładowane i przetwarzane jeden po drugim.

ES6 Import:

• możesz użyć nazwane import do selektywnie załaduj tylko potrzebne elementy. To może oszczędzaj pamięć.
• Import może być asynchroniczny (a w aktualnym czytniku modułów ES6 jest) i może działać trochę lepiej.

Ponadto system Require module nie jest oparty na standardach. Jest bardzo mało prawdopodobne, aby stać się standardem teraz, gdy istnieją Moduły ES6. W przyszłości pojawi się natywne wsparcie dla modułów ES6 w różnych implementacjach, które będzie korzystne pod względem wydajności.

Główne zalety to składnia:

• składnia bardziej deklaratywna / zwarta
• moduły ES6 zasadniczo sprawią, że UMD (Universal Module Definition) stanie się przestarzały - zasadniczo usunie schizmę między CommonJS i AMD (server vs browser).

Jest mało prawdopodobne, aby zobaczyć jakiekolwiek korzyści z wydajności z modułów ES6. Nadal będziesz potrzebować dodatkowej biblioteki do spakowania modułów, nawet jeśli w przeglądarce jest pełna obsługa funkcji ES6.

Czy są jakieś korzyści wydajnościowe z używania jednego nad drugim?

Obecna odpowiedź brzmi nie, ponieważ żaden z obecnych silników przeglądarki nie implementuje import/export ze standardu ES6.

Niektóre wykresy porównawcze http://kangax.github.io/compat-table/es6 / Nie bierz tego pod uwagę, więc gdy widzisz prawie wszystkie zielenie dla Chrome, po prostu uważaj. import słowo kluczowe z ES6 nie zostało wzięte pod uwagę.

Innymi słowy, bieżąca przeglądarka silniki, w tym V8, nie mogą importować nowego pliku JavaScriptz głównego pliku JavaScript poprzez dowolną dyrektywę JavaScript.

( możemy być jeszcze tylko o kilka błędów lub o wiele lat, dopóki V8 Nie zaimplementuje tego zgodnie ze specyfikacją ES6. )

Ten dokument jest tym, czego potrzebujemy, a ten dokument jest tym, czego musimy przestrzegać.

A standard ES6 mówi, że zależności modułów powinny tam być zanim przeczytamy moduł podobnie jak w języku programowania C, gdzie mieliśmy pliki (nagłówki) .h.

Jest to dobra i dobrze przetestowana struktura i jestem pewien, że eksperci, którzy stworzyli standard ES6, mieli to na myśli.

To pozwala Webpackowi lub innym pakietom zoptymalizować pakiet w niektórych specjalnych przypadkach i zmniejszyć niektóre zależności od pakietu, które nie są potrzebne. Ale w przypadkach, gdy mamy doskonałe zależności, To nigdy się nie wydarzy.

Będzie potrzebował trochę czasu dopóki import/export natywne wsparcie nie zostanie uruchomione, a słowo kluczowe require nie zniknie przez długi czas.

Co to jest require?

To jest node.js Sposób ładowania modułów. ( https://github.com/nodejs/node )

Node używa metod systemowych do odczytu plików. Zasadniczo polegasz na tym używając require. require zakończy się wywołaniem systemowym, takim jak uv_fs_open (zależy od systemu końcowego, Linux, Mac, Windows), aby załadować plik/moduł JavaScript.

Aby sprawdzić, czy to prawda, spróbuj by użyć Babel.js, a zobaczysz, że słowo kluczowe import zostanie przekonwertowane na require.

Używanie modułów ES6 może być przydatne do "tree potrząsania"; tzn. umożliwienie Webpack 2, Rollup (lub innych bundlerów) identyfikacji ścieżek kodu, które nie są używane/importowane, a zatem nie trafiają do wynikowego pakietu. Może to znacznie zmniejszyć rozmiar pliku, eliminując kod, którego nigdy nie potrzebujesz, ale z CommonJS jest domyślnie dołączony, ponieważ Webpack et al nie mają sposobu, aby wiedzieć, czy jest potrzebny.

Odbywa się to za pomocą statycznej analizy ścieżki kodu.

Na przykład, użycie:

import { somePart } 'of/a/package';

... daje bundlerowi wskazówkę, że package.anotherPart nie jest wymagany (jeśli nie jest importowany, nie może być używany - prawda?), więc nie będzie to kłopotliwe.

Aby włączyć to dla Webpack 2, Musisz upewnić się, że Twój transpiler nie wypluwa modułów CommonJS. Jeśli używasz wtyczki es2015 z babel, możesz ją wyłączyć w swoim .babelrc w następujący sposób:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

Rollup i inne mogą działać inaczej-Przejrzyj dokumenty, jeśli jesteś zainteresowany.

Jeśli chodzi o asynchroniczne lub leniwe Ładowanie, to import () jest znacznie potężniejsze. Zobacz kiedy wymagamy komponentu w sposób asynchroniczny, wtedy tylko importujemy go w sposób asynchroniczny jak w zmiennej const.

const module = await import('./module.js');

Lub jeśli chcesz użyć require() wtedy,

const converter = require('./converter');

Rzecz w tym, że import() jest w naturze asynchroniczna. Jak wspomniał neehar venugopal w ReactConf, można go używać do dynamicznego ładowania komponentów.

Jest również o wiele lepiej, jeśli chodzi o Routing. That is the one special rzecz, która sprawia, że dziennik sieciowy, aby pobrać niezbędną część, gdy użytkownik łączy się z określoną witryną do określonego komponentu. np. strona logowania przed pulpitem nawigacyjnym Nie pobierze wszystkich komponentów Pulpitu nawigacyjnego. Ponieważ to, co jest potrzebne, czyli komponent logowania, który tylko zostanie pobrany.

Uwaga - jeśli rozwijasz węzeł.js project, wtedy musisz ściśle używać require(), ponieważ node wyrzuci błąd wyjątku jako invalid token 'import', jeśli użyjesz import. Więc node nie obsługuje importu statements

UPDATE-jak zasugerował Dan Dascalescu : od wersji 8.5.0 (wydanej we wrześniu 2017), node --experimemntal-modules index.mjs pozwala używać import bez Babel. Możesz (i powinieneś) również opublikować swoje pakiety npm jako natywny ESModule, ze wsteczną kompatybilnością dla starego require.

Zobacz to, aby uzyskać więcej informacji, gdzie używać importu asynchronicznego- https://www.youtube.com/watch?v=bb6RCrDaxhw

Osobiście używam importu, ponieważ, możemy importować wymagane metody, członków za pomocą import.

import {foo, bar} from "dep";

nazwa pliku: dep.js

export foo function(){};
export const bar = 22