빌드리스가됩니다

장거리 관계에는 종종 빈번한 비행이 포함됩니다. 이 비행 중에 Reddit을 따라 잡는 아이디어가 매력적입니다. 오프라인 Reddit 앱을 검색하는 대신 현대적인 웹 기술과 "빌드리스"개발 접근법을 선보이기로 결정했습니다.

이 게시물은 혁신적인 웹 개발자와 기여를 축하합니다. 단계별 튜토리얼은 아니지만 전체 코드는 Github에서 사용할 수 있습니다.

목표는 툴링 및 종속성을 최소화하는 Reddit 리더입니다. 우리는 다음을 활용합니다 :

• LitElement : 웹 구성 요소를 활용하는 가볍고 사용하기 쉬운 구성 요소 모델.
• @vaadin/router : 훌륭한 개발자 경험이있는 소형 라우터.
• @pika/web : 개발 중에 모듈 관리를 단순화합니다.
• ES-DEV-SERVER : 간단한 DEV 서버 (모든 HTTP 서버가 작동하지만).

또한 ES 모듈, 웹 구성 요소, 가져 오기 맵, KV 스토리지 및 서비스 작업자 등 브라우저 표준을 활용합니다.

종속성 설치 :

 npm i -s lit -element @vaadin/router
npm i -d @pika/web es-dev-server

package.json : postinstall 스크립트 추가 :

 "스크립트": {
  "시작": "es-dev-server",
  "Postinstall": "Pika-Web"
}

pika : 종속성을 간소화합니다

Pika (Fred K. Schott의)는 웹 개발을 단순화하여 web_modules/ Directory의 개별 JavaScript 파일로 종속성을 설치합니다. 이것은 프로세스를 단순화하고 복잡한 빌드 구성을 피합니다. 출력은 다음과 비슷합니다.

 <code>└─ web_modules/ ├─ lit-element.js └─ @vaadin └─ router.js</code>

맵 가져 오기 : 베어 지정자 해결

index.html 에는 베어 모듈 지정자를 처리하기위한 가져 오기 맵이 포함되어 있습니다.

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js :

 'lit-element'에서 {litelement, html} import;

클래스 redditpwaapp 확장 litelement {
  렌더 () {
    html`를 반환하십시오<h1 id="안녕하세요-세상"> 안녕하세요 세상!</h1> `;;
  }
}

customElements.define ( 'reddit-pwa-app', redditpwaapp);

가져 오기 맵은 Bare Module Specifier 문제를 해결하여 복잡한 빌드 프로세스없이 브라우저 호환성을 가능하게합니다.

서비스 작업자 : 오프라인 기능

오프라인 액세스를 가능하게하려면 index.html 에 등록 된 서비스 작업자 ( sw.js )를 구현합니다.

 if (네비게이터의 'ServiceWorker') {
  window.addeventListener ( 'load', () => {
    navigator.serviceworker.register ( './ sw.js');
  });
}

서비스 작업자는 자산을 사전 자산으로, 오프라인 기능을 보장합니다. Pika는 명확한 자산 목록을 제공하여이를 단순화합니다. ( sw.js 세부 사항은 Github Repo를 참조하십시오).

KV 스토리지 : 오프라인 데이터 지속성

오프라인으로 게시물을 저장하기 위해 INdexEdDB 상단에있는 내장 모듈 인 KV 스토리지를 사용합니다. 비동기 작업을 제공하고 LocalStorage보다 성능이 향상됩니다. 폴리 필은 더 넓은 브라우저 지원을 보장하는 데 사용됩니다. (구현 세부 사항은 Github Repo를 참조하십시오).

가져 오기 맵을 사용한 폴리 플링

KV Storage Polyfill ( kv-storage-polyfill )이 포함되어 있으며 가져 오기 맵을 통해 관리되어 기본 KV 스토리지를 사용할 수없는 경우 폴백 메커니즘을 제공합니다.

결론

이 프로젝트는 최소한의 종속성을 갖춘 기능적 PWA를 구축하여 현대 웹 표준의 이점과 건축없는 접근 방식을 강조합니다. 대체 빌드 도구가 존재하지만이 방법은 단순성과 액세스 용이성을 우선시합니다. GitHub 저장소는 추가 탐색을위한 완전한 코드베이스를 제공합니다. Twitter (@Passle_ 또는 @Openwc) 및 OpenWC.org에서 피드백 및 토론을 환영합니다.

감사의 말 :

Guy Bedford (ES-Module-Shims), Luke Jackson ( "그 앱을 만들지 마십시오!"), Benny Powers 및 Lars Den Bakker에게 감사의 말을 전합니다.

위 내용은 빌드리스가됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!