👋 안녕하세요 여러분!

제 이름은 토드입니다. 저는 웹에 대한 열정을 가진 소프트웨어 엔지니어입니다. 이것은 DEV에 대한 나의 첫 번째 게시물입니다 🎉 당신이 그것에 대해 얼간이라도 피드백은 정말 감사합니다 😉

오늘 저는 완벽한 도구를 갖춘 LitElement 프로젝트를 처음부터 만드는 가장 빠르고(간단한) 방법을 보여드리고자 합니다. 모두 하나의 명령으로.

TL; DR

시작하기 위해 복사할 명령을 찾고 있는 분들을 위해 let me empower you to do so :

$ npm init @open-wc

간략하게 LitElement

Polymer 팀의 이 미래 지향적인 프로젝트를 통해 어리석게도 빠른 표준 기반 웹 구성 요소를 쉽게 만들 수 있습니다. 예를 들어 React와 같은 대부분의 주류 구성 요소 프레임워크와 유사한 개발자 경험을 제공합니다.

LitElement 자체는 기본 웹 구성 요소 사양을 기반으로 하는 간단한 기본 클래스입니다.

LitElement 구성 요소는 HTML 및 JS를 사용할 수 있는 모든 곳에서 사용할 수 있습니다! 프로젝트 또는 전체 조직에서 구성 요소를 공유하는 것은 매우 쉽습니다! 이 이식성은 앞으로 몇 년 동안 팀에 도움이 될 수 있습니다.

현재 선택한 프레임워크에도 불구하고 LitElement는 확인해 볼 가치가 있습니다!

동기 부여

official documentation은 전반적으로 훌륭하지만 "시작하기"섹션은 정확히 간단하지 않습니다. 그들이 제안한 "Hello World"경로는 진정으로 빠른 시작을 위해 다소 희망적이고 작업이 무거워 보였습니다. 이것은 Typescript와 Javascript의 시작 경로를 동시에 제공한다는 사실과 함께 LitElement로의 첫 번째 시도가 간단하지 않습니다. 나는 새로운 기술을 시도할 때 단순함을 높이 평가합니다.

번거로움을 피하고 오늘 멋진 제품을 만들기 시작하세요.
Open-WC project generator을 입력합니다.


참고: 이 생성기는 공식 문서에서 대체 시작으로 제안 *입니다*. 그러나이 글을 쓰는 시점에서 현재 링크가 끊어졌습니다 😲
관심을 갖고 권한을 부여받은 웹 시민으로서 저는 이 문제를 수정하기 위해 [PR](https://github.com/Polymer/lit-element/pull/1160)을 제출했습니다.

발전기

먼저 루트 개발 폴더에 대한 터미널을 엽니다. 개인적으로 저는 말 그대로 루트(development 또는 홈) 디렉토리(:

다음으로 다음 마법 주문을 실행합니다.

$ npm init @open-wc

이것은 npm에서 필요한 모든 것을 다운로드하고 대화형 CLI를 시작합니다.


"이상한 것은 무엇입니까~/ ?"
이 명령은 이니셜라이저를 사용합니다.
npm 문서에서 언급했듯이:

npm init initializer can be used to set up a new or existing npm package.

이 경우 npm이 명령을 실행하기 전에 npm init 에서 npm init @open-wc 로 변환됩니다.

npx를 사용하여 초기화 프로그램npx @open-wc/create을 설치하면 npx가 자동으로 기본 저장소를 실행합니다.

꽤 깔끔하죠? 나는 새로운 것을 배웠고 당신도 그랬기를 바랍니다(:



실행 후 몇 가지 질문을 합니다.

오늘은 무엇을 하시겠습니까?

✅ Scaffold a new project
› Upgrade an existing project

What would you like to scaffold?

✅ Application
› Component

1. What would you like to add?

   › Linting (es-lint & prettier)
   › Testing (web-test-runner)
   › Demoing (storybook)
   ✅ Building (rollup)
   

2. Would you like to use typescript?

   ✅ Yes
   › No
   

3. Would you like to scaffold examples files for?

   ✅ Building (rollup)
   

4. What is the tag name of your application/web component?

   hello-lit
   

5. Do you want to write this file structure to disk?

   ✅ Yes
   › No
   

6. Do you want to install dependencies?

   › No
   › Yes, with yarn
   ✅ Yes, with npm
   

크래킹 받기

Now you've got everything you need to make a web application with LitElement! Let's go ahead and start a live-reload dev server. Just cd into your project directory and then run npm run start: