LitElement 및 TypeScript 시작

작성자: Luis Aviles(
) 구글 개발 전문가가 인터넷 기술과 각도
오늘날 기능이 강한 프레임워크와 라이브러리의 사용은 매우 광범위하다.우리는 각도, 반응을 명명할 수 있다.js, Vue, Svelte 등.
구성 요소 기반 프레임워크를 사용하지 않고 웹 응용 프로그램을 구축하는 것은 상상하기 어렵다.이러한 옵션에 대해 구성 요소는 사용자 정의 동작과 스타일을 제공하고 응용 프로그램의 구성 블록으로 사용할 수 있는 재사용 및 구성 가능한 작은 부품입니다.
우리는 이 프레임들 사이에서 구성 요소를 공유할 수 있습니까?간단히 말하면 답은 부정적이다. 프레임워크/라이브러리마다 구성 요소를 구축하기 위한 사용자 정의 API 정의가 있고 상호작용이 불가능하다.

문자 요소

공식 문서website에 따르면:

LitElement is a simple base class for creating fast, lightweight web components that work in any web page with any framework.

이것은 우리가 JavaScript를 사용할 수 있다는 것을 의미한다. 심지어 더 좋은 방식으로 OOP 범례: TypeScript를 사용할 수 있다는 것을 의미한다.우리들은 아래의 예로 그것을 해석합시다.

LitElement 및 JavaScript

JavaScript를 사용하여 첫 번째 사용자 정의 웹 구성 요소를 만들려면 다음과 같이 모양과 기능을 구현하는 클래스를 정의해야 합니다.

import { LitElement, html } from 'lit-element';

class HelloComponent extends LitElement {
  static get properties() { // JavaScript way to define custom properties
    return { name: { type: String } };
  }

  constructor() {
    super();
    this.name = 'Luis'; // Default value goes here.
  }

  render() { // Defines a template to be "rendered" as part of the component.
    return html`Hello ${this.name}. Welcome to LitElement!`;
  }
}

// Register as a custom element named <hello-component>
customElements.define('hello-component', MyElement);

텍스트 및 유형 스크립트

TypeScript의 강력한 기능을 사용하여 다음과 같이 데코더를 가져와 첫 번째 웹 구성 요소를 작성할 수 있습니다.

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('hello-component') //Decorator that register as a custom element named <hello-component>
export class HelloComponent extends LitElement {
  @property({type: String}) name = 'Luis'; // You can assign the default value here.

  render() { // Defines a template to be "rendered" as part of the component.
    return html`Hello, ${this.name}. Welcome to LitElement!</p>`;
  }
}

프로젝트에 새 구성 요소가 있습니다.템플릿 파일에서 HTML 어휘표의 새 구성원인 것처럼 사용할 수 있습니다.

  <hello-component></hello-component>
  <hello-component name="George"></hello-component>

최신 예를 해보고 싶으세요?다음 내용을 보거나 Stackblitz 편집기를 열면 됩니다.
Embedded content: https://stackblitz.com/edit/litelement-hello?embed=1&file=index.html
Litelement는 서로 다른 JavaScript 프레임워크를 사용하더라도 회사나 조직에서 쉽게 공유할 수 있는 웹 구성 요소를 구축하는 데 도움을 줍니다.

첫 번째 항목 만들기

따라서 현재 프로젝트를 시작하고 Lit Element를 사용하여 웹 구성 요소를 기반으로 하는 웹 응용 프로그램을 구축하는 것을 고려하고 있습니다.너무 좋아요!
처음부터 프로젝트를 시작할 수 있습니다.

LitElement 설치에 필요한 경우npm i lit-element

그런 다음 npm i typescript 를 사용하여 TypeScript 설치

파일을 만드는 것은 어떻습니까?

어떤 구축 시스템을 추가하고 설정하시겠습니까?

이제 ESlint와 Prettier를 추가하고 모범 사례를 따라야 합니다

유닛 테스트 지원 및 Karma 추가

알았어...

프로젝트 비계

tsconfig.json 계획된 project generator 지원을 받았습니다. 몇 초 안에 TypeScript 지원 및 일반 도구를 사용하여 첫 번째 프로젝트를 만들 수 있습니다.
실행open-wc 프로젝트 생성기:

npm init @open-wc
# Select "Scaffold a new project" (What would you like to do today?)
# Select "Application" (What would you like to scaffold?)
# Mark/Select "Linting", "Testing", "Demoing" and "Building" (What would you like to add?)
# Yes (Would you like to use TypeScript?)
# Mark/Select "Testing", "Demoing" and "Building" (Would you like to scaffold examples files for?)
# my-project (What is the tag name of your application/web component?)
# Yes (Do you want to write this file structure to disk?)
# Yes, with npm (Do you want to install dependencies?)

다음 출력을 얻을 수 있습니다.

다음 프로젝트 구조가 생성됩니다.

./
├── my-project/
│ ├── .storybook/
│ │ ├── main.js
│ │ └── preview.js
│ ├── src/
│ │ ├── my-project.ts
│ │ ├── MyProject.ts
│ │ └── open-wc-logo.ts
│ ├── stories/
│ │ └── my-project.stories.ts
│ ├── test/
│ │ └── my-project.test.ts
│ ├── .editorconfig
│ ├── .eslintrc.js
│ ├── .gitignore
│ ├── custom-elements.json
│ ├── index.html
│ ├── karma.conf.js
│ ├── LICENSE
│ ├── package.json
│ ├── README.md
│ ├── rollup.config.js
│ └── tsconfig.json

이 프로젝트는 open-wc,lit-element,typescript,eslint,prettier(테스트),karma(프레젠테이션) 및storybook(건축) 등 많은 도구를 지원합니다.
마지막으로 rollup 명령을 실행하여 응용 프로그램의 개발 미리보기를 제공합니다.

Visual Studio 코드 확장

다음 Visual Studio 코드 확장은 TypeScript를 사용하여 웹 구성 요소를 구축하는 데 유용합니다.

lit-html . TypeScript 태그로 확장된 템플릿 문자열의 html 코드는 문법 하이라이트 디스플레이와 스마트 감지를 추가합니다.

LitElement Snippet . 이 확장은 npm run start 코드 세그먼트를 제공하여 LitElement 장식기, 자동 생성 속성, @customElement() 함수 등 자동 생성 클래스를 사용하는 데 사용됩니다.

LitElement and Polymer v2/v3 Snippets . 이전 버전과 달리 이 확장자를 설치할 수 있습니다. 이 확장자는 Lit Element와 Polymer를 위한 JavaScript와 HTML 세션 몇 개를 포함합니다.

결론

Litelement는 웹 구성 요소 표준을 바탕으로 하고 자바스크립트 기반 프레임워크나 라이브러리와 호환되기 때문에 경량급 웹 응용 프로그램을 구축하는 가장 좋은 대체 방안이다.물론 이러한 구성 요소를 사용하여 SPA(단일 페이지 응용 프로그램)를 구축하거나 PWA(점진적 웹 응용 프로그램) 기능을 추가하는 것은 가능하다.
TypeScript의 도움으로 우리는 더 많은 가능성을 볼 수 있고 좋은 개발 체험을 통해 웹 구성 요소를 더욱 빨리 구축할 수 있다.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, Web Components, GraphQL, Node, Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 thisdotlabs.com를 참조하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용적이고 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 를 참조하십시오thisdot.co.