Naršyti tampa vis labiau perspektyviu sprendimu kuriant scenarijus JS ir pasiūlyti sintaksę, pagrįstą sintaksė Node.js. Scenarijų kompiliavimas su Naršyti Yra paprastas. Vystymo metu naudojant „Watchify“ leidžia greitai kompiliuoti failus. Nepaisant to, kai norite integruoti savo kompiliaciją su kitomis užduotimis Murkti (pvz., rinkti failus Mažesnis), susiduriate su problema: kaip naudoti žiūrėti tuo pačiu metu kaip gurkšnotas laikrodis. Atsakymas šiame straipsnyje!

santrauka

„Gulp“ ir „Browserify“ naudojimas – 0 lygis

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

naudojimas Murkti et Naršyti yra gana paprasta. Galite naudoti „Browserify“ API arba paprasčiau ir naudoti „gulp-browserify“, kuri leis lengvai kompiliuoti failus.

const gurkšnoti = reikalauti("gurkšnoti");
const browserify= reikalauti(„gulp-browserify“);
gulp.task("js", funkcija() {
gulp.src(„src/*.js“, { skaityti: klaidingas })
.pipe(browserify())
.pipe(gulp.dest('./build/'))
});

Problema, su kuria greitai susiduriate, yra ta, kad norėdami dirbti su failais ir iš naujo juos sukompiliuoti, turėsite išanalizuoti visus failus. Tai labai brangu. Naršyti turės įkelti visus failus, bet ir visas naudojamas priklausomybes. Kuo didesnis jūsų projektas, tuo greičiau praeis laikas. Be to, jei naudojate transformuoja kaip Babelify laikai išsipūs dar greičiau (visų „Babel“ galimų įskiepių sąrašas). Taip pat visų sąrašas Naršyti transformacijas.

Prieš parodydamas jums galutinį sprendimą, štai kaip atrodytų sprendimas naudojant klasiką gurkšnotas laikrodis.

gulp.task("žiūrėti", funkcija () {
gulp.watch(„./src/*.js“["js"]).mes("pakeisti", funkcija(renginys) {
konsolė.log(`Failas ${event.path} buvo ${event.type}`);
});
});

Naudojant šį sprendimą, kiekvieną kartą pakeitus vieną iš failų, paleidžiama visa kompiliacija.

„Watchify“

„Watchify“ leidžia efektyviai kompiliuoti failus Naršyti. Jis išsaugos atmintyje kiekvieno failo sudarymo rezultatus (visus failus, susietus su jūsų failu, pvz., priklausomybes...).

Kai failas atnaujinamas, jis atnaujina ką tik pakeistą failo piršto atspaudą ir sugeneruoja a pluoštas neanalizuojant visų savo priklausomybių.

Naudokite „Gulp“, „Browserify“ ir „Watchify“ – lygis ∞

Node.js priklausomybių diegimas

Galite juos įdiegti su verpalais (jei tikrai esate atnaujintas 🙂)!

1	$ yarn pridėti browserify gulp vinyl-buffer vinyl-source-stream watchify –dev

Kitu atveju naudojate seną gerą NPM 🙉

1	$ npm įdiegti browserify gulp vinyl-buffer vinyl-source-stream watchify –save-dev

gulpfile.js

„griežtas naudojimas“;
const browserify= reikalauti(„naršyti“),
buferis = reikalauti("vinilo buferis"),
gurkšnoti = reikalauti("gurkšnoti"),
kelias = reikalauti("kelias"),
šaltinis = reikalauti(„vinilo šaltinio srautas“),
vartotojas = reikalauti(„Gulp-util“),
žiūrėti = reikalauti("žiūrėti"),
src = {
js: „./src/main.js“
},
paskirties vieta = {
js: "./build/"
};
leisti surišėjas;
funkcija ryšuliai(profilis) {
if (ryšulėlis === undefiNed) {
if (profilis === "žiūrėti") {
bundler = watchify(browserify(src.js));
} kitas {
bundler = browserify(src.js);
}
}
paketas ();
}
funkcija pluoštas() {
leisti pradžia = Naujas produktas Data().getTime(),
_ = rinktuvas
.bundle()
.mes("klaida", util.log.bind(util, „Naršyklės klaida“))
.pipe(source(„main.js“))
.pipe(buffer())
.pipe(gulp.dest(dest.js)),
laikas = Naujas produktas Data().getTime() – pradžia;
util.log(„[browserify] rebundle take“ , use.colors.cyan(`${time} ms“.), util.spalvos.pilka (`(${src.js})`));
grįžti _;
}
gulp.task("js", bundles.bind(null));
gulp.task("žiūrėti", funkcija () {
ryšuliai ("žiūrėti");
bundler.on("atnaujinti", bundle.bind(null));
});
gulp.task("numatytas"["žiūrėti", "js"]);

Čia yra labai supaprastintas, bet funkcionalus pavyzdys. Šis kodas gali būti dar labiau supaprastintas, tačiau jame pateikiamas kodo, kurį reikia sukurti, kad būtų galima apdoroti a, eskizas karštas perkrovimas veiksmingas.

Norėdami supaprastinti jūsų užduotį, pateikiu jums archyvą su a guplfile.js išsamesnė, kuri tvarko failų kompiliavimą JavaScript su Babelio bokštas (ir kai kurie presents kaip ES2015), bet ir failus Mažesnis tvarkydamas profilius kaip Développement su ar be žiūrėti bet ir gamyba su sumažinimu!

išvada

Tai visiškai įmanoma naudoti Naršyti efektyviai su Murkti su sąlyga, kad žaisite API. Tai verčia jus šiek tiek nukrypti nuo sumuštų takelių ir apsieiti be įskiepių Murkti kuriuos dažniausiai naudojame.