lite server

Lite-Server

Pengembangan ringan hanya server simpul yang melayani aplikasi web, membukanya di browser, menyegarkan ketika HTML atau JavaScript berubah, menyuntikkan perubahan CSS menggunakan soket, dan memiliki halaman fallback ketika rute tidak ditemukan.

Mengapa

Browsersync melakukan sebagian besar dari apa yang kami inginkan di server pengembangan ringan yang sangat cepat. Ini melayani konten statis, mendeteksi perubahan, menyegarkan browser, dan menawarkan banyak penyesuaian.

Saat membuat spa ada rute yang hanya diketahui oleh browser. Misalnya, /customer/21 dapat berupa rute sisi klien untuk aplikasi sudut. Jika rute ini dimasukkan secara manual atau ditautkan secara langsung sebagai titik masuk aplikasi Angular (alias tautan dalam), server statis akan menerima permintaan, karena Angular belum dimuat. Server tidak akan menemukan kecocokan untuk rute dan dengan demikian mengembalikan 404. Perilaku yang diinginkan dalam kasus ini adalah mengembalikan index.html (atau halaman awal aplikasi apa pun yang telah kami tentukan). Browsersync tidak secara otomatis memungkinkan halaman fallback. Tapi itu memungkinkan untuk middleware khusus. Di sinilah lite-server melangkah masuk.

lite-server adalah pembungkus khusus sederhana di sekitar browsersync untuk membuatnya mudah untuk disajikan spa.

Instalasi dan penggunaan

Metode instalasi yang disarankan adalah instalasi NPM lokal untuk proyek Anda:

npm install lite-server --save-dev
yarn add lite-server --dev # or yarn

... dan tambahkan entri "skrip" di dalam file package.json proyek Anda:

 # Inside package.json...
  "scripts" : {
    "dev" : " lite-server "
  },

Dengan entri skrip di atas, Anda kemudian dapat memulai lite-server melalui:

npm run dev

Opsi lain untuk menjalankan binari NPM yang diinstal secara lokal dibahas dalam pertanyaan overflow stack ini: Cara menggunakan paket yang diinstal secara lokal di node_modules

Menggunakan dengan cepat

Lite-Server dapat digunakan dengan npx

npx lite-server

Instalasi Global

Lite-server juga dapat diinstal secara global, jika lebih disukai:

npm install --global lite-server

# To run:
lite-server

Konfigurasi Kustom

Perilaku default berfungsi dari folder saat ini, membuka browser, dan menerapkan rute html5 fallback ke ./index.html .

Lite-Server menggunakan BrowserSync, dan memungkinkan untuk mengesampingkan konfigurasi melalui file bs-config.json atau bs-config.js lokal dalam proyek Anda.

Anda dapat memberikan jalur khusus ke file konfigurasi Anda melalui -c atau --config= Run Time Options:

lite-server -c configs/my-bs-config.js

Misalnya, untuk mengubah port server, menonton jalur file, dan direktori dasar untuk proyek Anda, membuat bs-config.json di folder proyek Anda:

{
  "port" : 8000 ,
  "files" : [ " ./src/**/*.{html,htm,css,js} " ],
  "server" : { "baseDir" : " ./src " }
}

Anda juga dapat memberikan jalur khusus ke Direktori Dasar Anda --baseDir= Opsi Run Time:

lite-server --baseDir= " dist "

Contoh yang lebih rumit dengan modifikasi ke middleware server dapat dilakukan dengan file bs-config.js , yang membutuhkan module.exports = { ... }; sintaksis:

 module . exports = {
  server : {
    middleware : {
      // overrides the second middleware default with new settings
      1 : require ( 'connect-history-api-fallback' ) ( {
        index : '/index.html' ,
        verbose : true ,
      } ) ,
    } ,
  } ,
} ;

File bs-config.js juga dapat mengekspor fungsi yang menerima instance Lite-Server BrowserSync sebagai satu-satunya argumennya. Meskipun tidak diperlukan, nilai pengembalian fungsi ini akan digunakan untuk memperluas konfigurasi Lite-Server default.

 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 ,
        } ) ,
      } ,
    } ,
  } ;
} ;

Catatan: Perlu diingat bahwa ketika menggunakan Middleware menimpa modul middleware spesifik harus diinstal dalam proyek Anda. Sebagai contoh di atas, Anda harus melakukan:

npm install connect-history-api-fallback --save-dev

... jika tidak, Anda akan mendapatkan kesalahan yang mirip dengan:

Error: Cannot find module ' connect-history-api-fallback '

Contoh lain: Untuk menghapus salah satu tarif middlew default, seperti connect-logger , Anda dapat mengatur indeks array ke null :

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

Daftar seluruh rangkaian opsi browsersync dapat ditemukan di dokumennya: http://www.browsersync.io/docs/options/

Pengujian

Saat menggunakan lite-server untuk menjalankan tes ujung ke ujung, kami mungkin tidak ingin mencatat secara verbos. Kami mungkin juga ingin mencegah peramban dari pembukaan. Opsi-opsi ini di bs-config.js akan membungkam semua penebangan dari lite-server :

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

Masalah yang diketahui

CSS dengan Angular 2 tertanam sehingga meskipun BrowserSync mendeteksi perubahan file ke CSS, itu tidak menyuntikkan file melalui soket. Sebagai solusi, injectChanges Default menjadi false .

Berkontribusi

1. Garpu dan mengkloningnya
2. Instal Ketergantungan: npm install
3. Buat Cabang Fitur: git checkout -b new-feature
4. Perubahan Komit: git commit -am 'Added a feature'
5. Jalankan Analisis Kode Statis dan Uji Unit: npm test
6. Dorong ke Cabang Jarak Jauh: git push origin new-feature
7. Buat permintaan tarik baru

Lisensi

Kode yang dirilis di bawah lisensi MIT.