Svelte를 사용하여 웹 구성 요소를 개발하고 싶습니다.하지만 Did you forget the'custom Element: 정말'comple option?대화 상자.

4014 단어 Svelte

배경.


5년 동안 저는 Anglar를 좋아했고 지금도 좋아합니다. 하지만 어쨌든 묶은 사이즈의 크기가 옥에 흠집이 있습니다. 새 버전이 나올 때마다 작아질 거라고 기대했지만 소감이 많습니다.물론 고기능이라 어쩔 수 없지...
그래서 웹 구성 요소를 만들 기회가 생겼고, Anglar Elements는 있다는 것을 알면서 Svelte에 바람을 피워 보았다.
Svelte는 지난해부터 신경을 많이 썼는데 올여름 Type script 공식 지원 해봤기 때문에 갑자기 써보고 싶었어요.

프로젝트 작성


VS 코드로 개발Svelte for VS Code했기 때문에 플러그인을 추가했습니다.
그리고 터미널에서 다음 동작을 실행합니다.
$ npx degit sveltejs/template sample-svelte-component
$ cd sample-svelte-component/
$ node scripts/setupTypeScript.js
$ npm install
Javascript에서 사용하는 초기 항목에서 스크립트를 실행하여 Typescript용으로 변환합니다.이렇게 하면 다음 프로젝트가 완성됩니다.

또한 이번에 사용된 주요 버전은 다음과 같다.
모듈
릴리즈
svelte
3.29.4
svelte-check
1.1.11

웹 구성 요소로


문서에 따라 웹 구성 요소 만들기

  • 컴파일 옵션customElement: true을 지정합니다.

  • 초기 프로젝트이기 때문에 롤러로 구축되어 있습니다. 롤러.config.js로 지정합니다.
    plugins: [
svelte({
    customElement: true, // <- 追記
    // enable run-time checks when not in production
    dev: !production,
  • .svelte 파일에서 <svelte:options tag="sample-svelte-component"/> 처럼 tag 속성으로 요소 이름을 지정합니다.
    • 그렇다고 들었습니다.
    그리고 원형에 따라 수정을 해요.
  • main.ts에 바디 요소의 실례 코드가 추가되었습니다.
    import App from './App.svelte';

// const app = new App({
//  target: document.body,
//  props: {
//      name: 'world'
//  }
// });

export default App; // <- ここも意味があるか判らないけどappからAppに変更

  • index.''에 웹 구성 요소의 요소 이름이 추가되었습니다.
    <body>
    <sample-svelte-component name="world">
    </sample-svelte-component>
</body>
    • 실행npm run dev 동작을 확인할 수 있습니다.

    options 속성에 Warning 표시


    여기에 주제에 적힌 주제, VS 코드의 앱입니다.svelte 보니까

    무척 궁금하다는 뜻이다.Svelte for VS Code 플러그인 문제인 줄 알았는데 npm run validate 실행하면 같은 Warning이 표시됩니다.
    하지만'npm run build'이면 컴파일링이 정상적으로 끝납니다, roll.config.js에서 "custom Element: 정말"설정을 삭제하고 실행하면 같은 Warning이 표시됩니다. 따라서 설정이 잘못된 것은 아닐 것입니다.
    따라서 실제 문제가 있을 경우npm run dev'npm run build'에도 워닝이 표시되기 때문에 VS 코드의 설정에서 워닝을 무시한다.

    최후


    그나저나 npm run validate에도 이런 문제가 발생할 수 있다.
    아직 개발 환경이 충실하다고 할 수는 없지만 관심도 면에서 앞으로의 발전을 기대할 수 있을 것이다.
    코드 관리 도구의github
    우리는fastAPI로Django 강좌를 만들고 반응하고 있다.fastAPI 프로젝트를 설정하자!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage