lite server

라이트 서버

Lightweight Developer 웹 앱을 제공하고 브라우저에서 열리는 노드 서버 전용 노드 서버는 HTML 또는 JavaScript가 변경 될 때 새로 고침을 취하고 소켓을 사용하여 CSS를 주입하며 경로를 찾을 수없는 경우 폴백 페이지가 있습니다.

왜

Browsersync는 초고속 경량 개발 서버에서 원하는 대부분을 수행합니다. 정적 컨텐츠를 제공하고 변경 사항을 감지하고 브라우저를 새로 고침하며 많은 사용자 정의를 제공합니다.

스파를 만들 때 브라우저에만 알려진 경로가 있습니다. 예를 들어, /customer/21 각도 앱의 클라이언트 측 루트 일 수 있습니다. 이 경로가 수동으로 입력되거나 Angular 앱의 진입 점 (일명 깊은 링크)으로 직접 연결되면 정적 서버는 아직 앵글이로드되지 않았기 때문에 요청을 받게됩니다. 서버는 경로와 일치하지 않으므로 404를 반환합니다.이 경우 원하는 동작은 index.html (또는 우리가 정의한 앱의 모든 시작 페이지)을 반환하는 것입니다. BrowserSync는 자동으로 폴백 페이지를 허용하지 않습니다. 그러나 맞춤형 미들웨어를 허용합니다. 이곳은 lite-server 발걸음을 내딛는 곳입니다.

lite-server SPA를 쉽게 제공 할 수 있도록 BrowserSync 주변의 간단한 맞춤형 래퍼입니다.

설치 및 사용

권장 설치 방법은 프로젝트를위한 로컬 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 Binaries는이 스택 오버 플로우 질문에서 논의됩니다.

즉시 사용

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 BrowserSync 인스턴스를 유일한 인수로 수신하는 함수를 내보낼 수도 있습니다. 필수는 없지만이 함수의 반환 값은 기본 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 '

또 다른 예 : connect-logger 와 같은 기본 중간 전쟁 중 하나를 제거하려면 배열 인덱스를 null 로 설정할 수 있습니다.

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

전체 Browsersync 옵션 세트의 목록은 문서에서 찾을 수 있습니다 : http://www.browsersync.io/docs/options/

테스트

lite-server 사용하여 끝에서 종료 테스트를 실행할 때는 구두로 기록하지 않을 수 있습니다. 또한 브라우저가 열리지 않도록 할 수도 있습니다. bs-config.js 의 이러한 옵션은 lite-server 의 모든 로깅을 침묵시킵니다.

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

알려진 문제

BrowserSync가 CSS 로의 파일 변경을 감지하더라도 Angular 2를 갖는 CSS는 내장되어 있으면 소켓을 통해 파일을 주입하지 않습니다. 해결 방법으로, injectChanges 기본값이 false 으로 나타납니다.

기여

1. 포크와 복제
2. 종속성 설치 : npm install
3. 기능 분기 : git checkout -b new-feature 만듭니다
4. 커밋 변경 : git commit -am 'Added a feature'
5. 정적 코드 분석 및 단위 테스트 : npm test 실행하십시오
6. 원격 브랜치로 밀어 넣으십시오 : git push origin new-feature
7. 새 풀 요청을 만듭니다

특허

MIT 라이센스에 따라 릴리스 된 코드.