ดาวน์โหลด lite server - ดาวน์โหลดซอร์สโค้ด lite server

lite server

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

เซิร์ฟเวอร์ Lite

การพัฒนาที่มีน้ำหนักเบาเฉพาะ เซิร์ฟเวอร์โหนดที่ให้บริการเว็บแอปเปิดในเบราว์เซอร์รีเฟรชเมื่อเปลี่ยน HTML หรือ JavaScript การเปลี่ยนแปลง CSS จะเปลี่ยนไปโดยใช้ซ็อกเก็ตและมีหน้าทางเลือกเมื่อไม่พบเส้นทาง

ทำไม

Browsersync ทำสิ่งที่เราต้องการมากที่สุดในเซิร์ฟเวอร์การพัฒนาที่มีน้ำหนักเบาสุด ๆ มันให้บริการเนื้อหาคงที่ตรวจจับการเปลี่ยนแปลงรีเฟรชเบราว์เซอร์และเสนอการปรับแต่งมากมาย

เมื่อสร้างสปามีเส้นทางที่เป็นที่รู้จักของเบราว์เซอร์เท่านั้น ตัวอย่างเช่น /customer/21 อาจเป็นเส้นทางฝั่งไคลเอ็นต์สำหรับแอพเชิงมุม หากเส้นทางนี้ถูกป้อนด้วยตนเองหรือเชื่อมโยงโดยตรงกับจุดเริ่มต้นของแอพเชิงมุม (AKA ลิงก์ลึก) เซิร์ฟเวอร์คงที่จะได้รับคำขอเนื่องจาก Angular ยังไม่ถูกโหลด เซิร์ฟเวอร์จะไม่พบการจับคู่สำหรับเส้นทางและส่งคืน 404 พฤติกรรมที่ต้องการในกรณีนี้คือการส่งคืน index.html (หรือหน้าเริ่มต้นของแอพที่เรากำหนดไว้) Browsersync ไม่อนุญาตให้หน้าทางเลือกโดยอัตโนมัติ แต่มันอนุญาตให้มิดเดิลแวร์ที่กำหนดเอง นี่คือที่ที่ lite-server ก้าวเข้ามา

lite-server เป็น wrapper ที่ปรับแต่งเองรอบ ๆ เบราว์เซอร์ซินซีเพื่อให้ง่ายต่อการให้บริการสปา

การติดตั้งและการใช้งาน

วิธีการติดตั้งที่แนะนำคือการติดตั้ง 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

ใช้ทันที

Lite-Server สามารถใช้กับ 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 เป็นอาร์กิวเมนต์เดียว ในขณะที่ไม่จำเป็นค่าส่งคืนของฟังก์ชั่นนี้จะถูกใช้เพื่อขยายการกำหนดค่า Lite-Server เริ่มต้น

 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 '

อีกตัวอย่างหนึ่ง: ในการลบหนึ่งใน Middlewares เริ่มต้นเช่น connect-logger คุณสามารถตั้งค่าดัชนีอาร์เรย์เป็น null :

 module . exports = {
  server : {
    middleware : {
      0 : null , // removes default `connect-logger` middleware
    } ,
  } ,
} ;

รายการตัวเลือกชุดเบราว์เซอร์ซินทั้งหมดสามารถพบได้ในเอกสาร: http://www.browsersync.io/docs/options/

การทดสอบ

เมื่อใช้ lite-server เพื่อเรียกใช้การทดสอบแบบจบจนจบเราอาจไม่ต้องการบันทึก Verbosely เราอาจต้องการป้องกันไม่ให้เบราว์เซอร์เปิด ตัวเลือกเหล่านี้ใน bs-config.js จะปิดการบันทึกทั้งหมดจาก lite-server :

  open: false
  logLevel: "silent" ,
  server : {
    middleware : {
      0 : null
    }
  }

ปัญหาที่รู้จัก

CSS ที่มี Angular 2 ถูกฝังอยู่ดังนั้นแม้ว่า Browsersync จะตรวจจับการเปลี่ยนไฟล์เป็น CSS แต่ก็ไม่ได้ฉีดไฟล์ผ่านซ็อกเก็ต ในฐานะที่เป็นวิธีแก้ปัญหา injectChanges เริ่มต้นเป็น false