2015-10-09 13 views
15

Próbuję pobrać przeglądarkę i przejrzałem kilka przykładów.Browify import/wymagają?

W jednym przykładzie widzę użycie 'importu':

import 'jquery'; 

i importowania plików lokalnych z:

import Header from './Header'; 

ale w innych przykładach widzę ludzi importowania poprzez:

require('./Header'); 

Jaka jest różnica?

Odpowiedz

21

require() to system modułu węzła (CommonJS) w ES5. import to składnia modułu ES6.

Jeśli chcesz przeglądać moduły napisane za pomocą składni modułu ES6, musisz je skompilować, używając np. Babelify (lub babel w inny sposób).

+1

Dzięki za informację. – panthro

+2

Nie jestem pewien, czy rozumiem. Dlaczego potrzebowałbym 'browserify' (lub' require' w tym przypadku), jeśli przeniesię ES6 przez Babel? Czy to nie tłumaczy instrukcji 'import' na coś, co starsze środowiska JS rozumieją? – Matthias

+4

@Matthias pre-ES6 nie ma natywnego systemu modułów, więc istnieje wiele systemów zbudowanych w kodzie użytkownika (np. Moduły CommonJS/Node i AMD). 'require()' jest częścią interfejsu API modułu Node. Jest to jedno z "co nieco starszych środowisk JS" określających cele, do których można się skompilować (które będą działać w węźle). Jednak przeglądarki nie mają wiedzy o tych interfejsach API. Węzeł implementuje go przez owijanie modułów w funkcję, która wstrzykuje 'require()' itp. W przeglądarce 'require()' będzie tylko błędem referencyjnym. Browserify sprawia, że ​​działa on w przeglądarce i pakuje cały wykres zależności w jeden skrypt. – JMM