يخطئ تطوير خادم Node فقط الذي يخدم تطبيق ويب ، يفتحه في المتصفح ، ويتم تحديثه عند تغيير HTML أو JavaScript ، ويحقق تغييرات CSS باستخدام مآخذ ، ولديه صفحة احتياطي عند عدم العثور على مسار.
يقوم Browsersync بمعظم ما نريده في خادم تطوير خفيف الوزن سريع للغاية. إنه يخدم المحتوى الثابت ، ويكتشف التغييرات ، ويقوم بتحديث المتصفح ، ويقدم العديد من التخصيصات.
عند إنشاء منتجع صحي ، هناك طرق معروفة فقط للمتصفح. على سبيل المثال ، قد يكون /customer/21 طريقًا جانبيًا للعميل لتطبيق Angular. إذا تم إدخال هذا المسار يدويًا أو مرتبطًا مباشرة بنقطة الدخول للتطبيق الزاوي (ويعرف أيضًا باسم رابط عميق) ، فسيتلقى الخادم الثابت الطلب ، لأنه لم يتم تحميل الزاوية بعد. لن يجد الخادم مطابقة للمسار وبالتالي إرجاع 404. السلوك المطلوب في هذه الحالة هو إرجاع index.html (أو أي صفحة بداية للتطبيق التي حددناها). لا يسمح Browsersync تلقائيًا بصفحة احتياطي. لكنه يسمح للوسائط المخصصة. هذا هو المكان الذي يخطو فيه lite-server .
lite-server عبارة عن غلاف مخصص بسيط حول Browsersync لتسهيل تقديم SPAs.
طريقة التثبيت الموصى بها هي تثبيت NPM محلي لمشروعك:
npm install lite-server --save-dev
yarn add lite-server --dev # or yarn ... وأضف إدخال "نص" ضمن ملف package.json الخاص بمشروعك:
# Inside package.json...
"scripts" : {
"dev" : " lite-server "
}, مع إدخال البرنامج النصي أعلاه ، يمكنك بعد ذلك بدء lite-server عبر:
npm run devوتناقش خيارات أخرى لتشغيل ثنائيات NPM المثبت محليًا في سؤال الفائض المكدس: كيفية استخدام الحزمة المثبتة محليًا في Node_Modules
يمكن استخدام لايت خادم مع npx
npx lite-serverيمكن أيضًا تثبيت Lite-Server على مستوى العالم ، إذا كان يفضل:
npm install --global lite-server
# To run:
lite-server يخدم السلوك الافتراضي من المجلد الحالي ، يفتح متصفحًا ، ويطبق عائدًا على طريق HTML5 على ./index.html .
يستخدم Lite-Server Browsersync ، ويسمح بتجاوزات التكوين عبر ملف bs-config.json أو bs-config.js في مشروعك.
يمكنك توفير مسار مخصص لملف التكوين الخاص بك عبر -c أو --config= خيارات وقت التشغيل:
lite-server -c configs/my-bs-config.js على سبيل المثال ، لتغيير منفذ الخادم ، ومسارات الملفات المراقبة ، والدليل الأساسي لمشروعك ، قم بإنشاء bs-config.json في مجلد مشروعك:
{
"port" : 8000 ,
"files" : [ " ./src/**/*.{html,htm,css,js} " ],
"server" : { "baseDir" : " ./src " }
} يمكنك أيضًا توفير مسار مخصص لدليلك الأساسي --baseDir= خيارات وقت التشغيل:
lite-server --baseDir= " dist " يمكن إجراء مثال أكثر تعقيدًا مع تعديلات على البرامج الوسيطة الخادم باستخدام ملف bs-config.js ، والذي يتطلب module.exports = { ... }; بناء الجملة:
module . exports = {
server : {
middleware : {
// overrides the second middleware default with new settings
1 : require ( 'connect-history-api-fallback' ) ( {
index : '/index.html' ,
verbose : true ,
} ) ,
} ,
} ,
} ; قد يقوم ملف bs-config.js أيضًا بتصدير وظيفة تتلقى مثيل Lite-Server Browsersync كوسيطة واحدة فقط. على الرغم من أنه غير مطلوب ، سيتم استخدام قيمة إرجاع هذه الوظيفة لتوسيع تكوين خادم لايت الافتراضي.
module . exports = function ( bs ) {
return {
server : {
middleware : {
// overrides the second middleware default with new settings
1 : require ( 'connect-history-api-fallback' ) ( {
index : '/index.html' ,
verbose : true ,
} ) ,
} ,
} ,
} ;
} ;ملاحظة: ضع في اعتبارك أنه عند استخدام الأوساط الوسيطة ، يجب تثبيت وحدة الوسيطة المحددة في مشروعك. على سبيل المثال أعلاه ، ستحتاج إلى القيام بذلك:
npm install connect-history-api-fallback --save-dev... وإلا ستحصل على خطأ مشابه لـ:
Error: Cannot find module ' connect-history-api-fallback ' مثال آخر: لإزالة واحدة من الأوساط الوسيطة الافتراضية ، مثل connect-logger ، يمكنك تعيين فهرس Array على null :
module . exports = {
server : {
middleware : {
0 : null , // removes default `connect-logger` middleware
} ,
} ,
} ;يمكن الاطلاع على قائمة مجموعة كاملة من خيارات المتصفح في مستنداتها: http://www.browsersync.io/docs/options/
عند استخدام lite-server لتشغيل اختبارات النهاية إلى النهاية ، قد لا نرغب في تسجيل الدخول بشكل عام. قد نرغب أيضًا في منع المتصفح من الفتح. هذه الخيارات في bs-config.js سوف تسيطر على جميع عمليات التسجيل من lite-server :
open: false
logLevel: "silent" ,
server : {
middleware : {
0 : null
}
} يتم تضمين CSS مع Angular 2 وبالتالي على الرغم من أن Browsersync يكتشف تغيير الملف إلى CSS ، فإنه لا يضخ الملف عبر مآخذ. كحل بديل ، فإن injectChanges الافتراضيات إلى false .
npm installgit checkout -b new-featuregit commit -am 'Added a feature'npm testgit push origin new-featureرمز صدر تحت رخصة معهد ماساتشوستس للتكنولوجيا.