Przeglądarka staje się coraz bardziej opłacalnym rozwiązaniem do tworzenia skryptów JS i zaproponowanie składni wzorowanej na składni node.js. Skompiluj skrypty z Przeglądarka Jest proste. Podczas rozwoju, korzystanie z Obserwuj pozwala na kompilację plików w locie. Mimo to, jeśli chcesz zintegrować swoją kompilację z innymi zadaniami Łykać (jak kompilowanie plików Mniej), napotkasz problem: jak używać czuwać w tym samym czasie co łyk-zegarek. Odpowiedź w tym artykule!

streszczenie

Użyj Gulp i Browserify – poziom 0

Name: Agence Web Tremplin Numérique
Price range: $$$

stosowanie Łykać et Przeglądarka jest całkiem proste. Możesz użyć API Browserify lub uprościć i użyć gulp-browserify, co pozwoli ci łatwo skompilować pliki.

const łyk = wymagać('łyk');
const przeglądaj = wymagać(„przełykaj-przeglądaj”);
łyk.zadanie('js', funkcjonować() {
gulp.src('źródło/*.js', { czytać: fałszywy })
.pipe(przeglądaj())
.pipe(gulp.dest('./zbudować/'))
});

Problem, który szybko napotykasz, polega na tym, że aby pracować nad plikami i ponownie je skompilować w locie, będziesz musiał przeanalizować wszystkie pliki. To jest bardzo drogie. Przeglądarka będzie musiał załadować wszystkie twoje pliki, ale także wszystkie zależności, których używasz. Im większy będzie Twój projekt, tym szybciej upłynie czas. Dodatkowo, jeśli używasz transformacje comme Babelify czasy będą puchnąć jeszcze szybciej (Lista wszystkich wtyczek dostępnych przez Babel). Również lista wszystkich Przeglądaj przekształcenia.

Zanim pokażę ostateczne rozwiązanie, oto jak wyglądałoby rozwiązanie z klasyką łyk-zegarek.

łyk.zadanie("oglądać", funkcjonować () {
łyk.watch(„./źródło/*.js”[„js”]).My("zmiana", funkcjonować(wydarzenie) {
konsola.dziennik(`Plik ${zdarzenie.ścieżka} został ${event.type}`);
});
});

Dzięki temu rozwiązaniu za każdym razem, gdy zmieniasz jeden ze swoich plików, uruchamiana jest cała kompilacja.

Obserwuj

Obserwuj sprawia, że kompilacja plików jest wydajna Przeglądarka. Zachowa w pamięci wynik kompilacji każdego pliku (wszystkie pliki powiązane z twoim plikiem, takie jak zależności…).

Gdy plik jest aktualizowany, aktualizuje właśnie zmodyfikowany odcisk palca pliku i generuje plik zapakować bez analizowania wszystkich zależności.

Użyj Gulp, Browserify i Watchify – poziom ∞

Instalowanie zależności Node.js

Możesz je zainstalować za pomocą Yarn (jeśli naprawdę jesteś na bieżąco 🙂)!

1	$ przędza dodaj przeglądarkę łyk winylu-bufor winylu-źródło-strumień oglądaj –dev

W przeciwnym razie używasz starego, dobrego NPM 🙉

1	$ npm install browserify łyk bufora winylu strumień źródła winylu watchify –save-dev

gulpfile.js

„ścisłe użycie”;
const przeglądaj = wymagać(„przeglądaj”),
bufor = wymagać("bufor winylowy"),
łyk = wymagać("łyk"),
ścieżka = wymagać("ścieżka"),
źródło = wymagać(„strumień źródłowy winylu”),
użytkownik = wymagać(„przełyk-util”),
oglądać = wymagać(„obserwuj”),
źródło = {
js: „./src/main.js”
},
miejsce docelowe = {
js: "./zbudować/"
};
niech pakiet;
funkcjonować wiązki(profil) {
if (pakiet === undefined) {
if (profil === "oglądać") {
bundler = watchify(browserify(src.js));
} więcej {
bundler = browserify(src.js);
}
}
pakiet();
}
funkcjonować zapakować() {
niech początek = Nowy Data().uzyskać czas(),
_ = pakiet
.pakiet()
.My("błąd", util.log.bind(util, „Błąd przeglądania”))
.pipe(źródło(„główny.js”))
.pipe(bufor())
.pipe(gulp.cel(cel.js)),
czas = Nowy Data().getTime() – start;
util.log(„[przeglądaj] ponowny pakiet” , użyj.kolory.cyjan(`${czas} ms`), util.colors.grey(`(${źródło.js})`));
powrót _;
}
łyk.zadanie(„js”, pakiety.bind(zero));
łyk.zadanie("oglądać", funkcjonować () {
wiązki("oglądać");
pakiet.on("aktualizacja", pakiet.bind(zero));
});
łyk.zadanie("domyślny"["oglądać", „js”]);

Tutaj masz niezwykle uproszczony, ale funkcjonalny przykład. Ten kod można jeszcze bardziej uprościć, ale pokazuje szkic kodu, który należy utworzyć, aby obsłużyć plik a przeładowanie na gorąco skuteczne.

Aby uprościć twoje zadanie, udostępniam ci archiwum z plikiem guplfile.js bardziej kompletny, który obsługuje kompilację plików JavaScript z Babel (a niektóre presetów jak ES2015), ale także pliki Mniej podczas zarządzania profilami takimi jak développement z lub bez zegarek lecz również produkcja z minifikacją!

Wnioski

Jest całkiem możliwe do wykorzystania Przeglądarka skutecznie z Łykać pod warunkiem, że grasz API. To zmusza cię do zboczenia z utartych szlaków i obejścia się bez wtyczek Łykać z których zwykle korzystamy.