تصفح أصبح حلاً عمليًا أكثر فأكثر لتطوير البرامج النصية JS واقتراح بناء جملة على غرار ذلك من نود.جي إس. تجميع البرامج النصية بامتداد تصفح الأمر بسيط. أثناء التطورات ، يتم استخدام انتبه يسمح لك بتجميع الملفات على الطاير. على الرغم من ذلك ، عندما تريد دمج تجميعك مع مهام أخرى بلع (مثل تجميع الملفات أقل) ، تواجهك مشكلة: كيفية الاستخدام احترس في نفس الوقت مشاهدة بلع. الجواب في هذا المقال!

ملخص

استخدم Gulp و Browserify - المستوى 0

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

استعمال بلع et تصفح بسيط للغاية. يمكنك استخدام واجهة برمجة تطبيقات Browserify أو الذهاب بشكل أبسط واستخدام gulp-browserify الذي سيسمح لك بتجميع ملفاتك بسهولة.

CONST بلع = تطلب('بلع');
CONST browserify = تطلب("gulp-browserify");
gulp.task ("js", وظيفة() {
gulp.src ("src / *. js"، { اقرأ: زائف })
.pipe (browserify ())
.pipe (gulp.dest ('./يبني/'))
})؛

المشكلة التي تواجهها بسرعة هي أنه للعمل على ملفاتك وإعادة تجميعها بسرعة ، سيتعين عليك تحليل جميع الملفات. هذا مكلف جدا. تصفح سيتعين عليك تحميل جميع ملفاتك وكذلك جميع التبعيات التي تستخدمها. كلما كبر مشروعك ، زادت سرعة مرور الوقت. بالإضافة إلى ذلك ، إذا كنت تستخدم ملفات التحويلات مثل ربي ستتضخم الأوقات بشكل أسرع (قائمة بجميع المكونات الإضافية المتاحة عبر Babel). أيضا قائمة الكل Browserify التحويلات.

قبل أن أعرض لك الحل النهائي ، إليك ما سيبدو عليه الحل مع الحل الكلاسيكي مشاهدة بلع.

gulp.task ("يشاهد", وظيفة () {
رقصة الجلبة ("./src/*.js"، ["js"]).نحن("يتغير", وظيفة(حدث) {
يرجى العلم بأن يوجد سن محدد للمشاركة بهذه البطولات. الرجاء قراءة القواعد أدناه..سجل(ملف $ {event.path} وكان $ {event.type}`);
})؛
})؛

باستخدام هذا الحل ، في كل مرة تقوم فيها بتغيير أحد ملفاتك ، يتم تشغيل تجميع كامل.

انتبه

انتبه يجعل تجميع ملفاتك بفاعلية تصفح. سيحتفظ بالذاكرة نتيجة تجميع كل ملف (جميع الملفات المرتبطة بملفك مثل التبعيات ...).

عندما يتم تحديث ملف ، فإنه يقوم بتحديث بصمة الملف الذي تم تعديله للتو وينشئ ملف حزمة دون تحليل كل التبعيات الخاصة بك.

استخدم Gulp و Browserify و Watchify - المستوى ∞

تثبيت تبعيات Node.js

يمكنك تثبيتها باستخدام Yarn (إذا كنت حقًا محدثًا 🙂)!

1	$ yarn add browserify gulp فينيل عازلة فينيل مصدر تيار watchify –dev

خلاف ذلك ، فأنت تستخدم NPM القديم الجيد 🙉

1	$ npm تثبيت browserify gulp فينيل عازلة فينيل مصدر تيار watchify –save-dev

gulpfile.js

"استخدام صارم";
CONST browserify = تطلب("browserify"),
المخزن المؤقت = تطلب("عازلة الفينيل"),
بلع = تطلب("بلع"),
المسار = تطلب("طريق"),
المصدر = تطلب("فينيل المصدر تيار"),
المستخدم = تطلب("بلع"),
احترس = تطلب("احترس"),
src = {
js: "./src/main.js"
},
الوجهة = {
js: "./يبني/"
};
اسمحوا الحزم.
وظيفة بال(البيانات الشخصية) {
if (حزمة === undefiNED) {
if (الملف الشخصي === "يشاهد") {
bundler = watchify (browserify (src.js)) ؛
} آخر {
bundler = browserify (src.js) ؛
}
}
باقة()؛
}
وظيفة حزمة() {
اسمحوا تبدأ = جديد التاريخ().احصل على وقت()،
_ = التجميع
.باقة()
.نحن("خطأ"، util.log.bind (use، "خطأ في التصفح"))
.pipe (المصدر ("main.js"))
.pipe (المخزن المؤقت ())
.pipe (gulp.dest (dest.js)) ،
الوقت = جديد التاريخ() .getTime () - ابدأ ؛
use.log ("استغرق [browserify] rebundle" ، use.colors.cyan (`$ {time} مللي ثانية) ، util.colors.grey (`($ {src.js})`))؛
عائد أعلى _;
}
gulp.task ("js"، bundles.bind (فارغة))؛
gulp.task ("يشاهد", وظيفة () {
حزم("يشاهد");
bundler.on ("تحديث"، bundle.bind (فارغة))؛
})؛
gulp.task ("تقصير"، ["يشاهد", "js"])؟

هنا لديك مثال مبسط للغاية ولكنه عملي. يمكن تبسيط هذا الرمز بشكل أكبر ولكنه يعرض لك رسمًا تخطيطيًا للكود المطلوب إنتاجه للتعامل مع ملف إعادة تحميل الساخنة فعالية.

لتبسيط مهمتك ، أقدم لك أرشيفًا بامتداد guplfile.js أكثر اكتمالا ، والذي يتعامل مع تجميع الملفات جافا سكريبت مع بابل (و ال المسبقة مثل ES2015) ولكن أيضًا الملفات أقل أثناء إدارة ملفات تعريف مثل تنمية مع أو بدون راقب ولكن أيضا إنتاج مع تصغير!

في الختام

من الممكن جدا استخدام تصفح بشكل فعال مع بلع شريطة أن تلعب به API. يجبرك هذا على الابتعاد قليلاً عن المسار المطروق والاستغناء عن المكونات الإضافية بلع التي نستخدمها عادة.