아무튼 Svelte Kit 먼저 해볼게요.

What's the deal with SvelteKit?

알고 계십니까SvelteKit?
버전 1.0이 되지 않았던 Sapper 가져오기 Svelte 를 재구성한 것입니다.Sapper 공개된 웹 서비스를 이용하는 사람으로서 이를 사용하지 않는 방법은 없다.
그래서 오븐이 아직 시작되지 않았어요. 해보고 싶어요SvelteKit!

시도된 환경

Windows10

Node.js 14.15.4

npm 6.14.10

@sveltejs/kit 1.0.0-next.24

설치하다.

프로젝트 폴더에 다음 명령을 입력하면 CLI 가 설치를 시작합니다.

npm init svelte@next

프로젝트 폴더를 설치할 때 만들려면

npm init svelte@next my-app

이렇게 마지막으로 프로젝트 이름을 붙이면 됩니다.
명령을 실행하면...

ｗｗ
아직 사용할 준비가 되지 않았으니 브레이크를 밟아라!그렇다고 들었습니다.
다만, 경고를 이해한 상태에서 자유롭게 노는 건 OK니까 계속해.

? Directory not empty. Continue? » (y/N)

설치처에 파일이나 폴더가 있다면 가능한지 물어봐도 됩니다.

? Use TypeScript in components? » (y/N)

TypeScript 사용할 수 있습니까?

? What do you want to use for writing Styles in Svelte components? » - Use arrow-keys. Return to submit.
>   CSS
    Less
    SCSS

스타일시트 사용법CSSLess을 여쭤봐도 됩니다.
가져오기SCSS가 설치되어 있으면 설치할 때 선택할 수 있어서 기쁩니다!SCSS버전 1.0.0-next.24시간 이상 설치가 완료되었습니다.

응용 프로그램 시작

패키지 설치@sveltejs/kit와 yarn 모두 가능합니다.

yarn

npm i

참고로 제 환경에 다음과 같은 오류가 발생했습니다.

error [email protected]: The engine "node" is incompatible with this module. Expected version "^10 || ^12 || >=14". Got "13.14.0"

npm의 버전 13은 집선기인 것 같아서 오류가 있는 사람은 버전을 높이는 것이 좋다.
그리고 시동!

npm run dev

나왔네요!Node.js보다 화면이 더 깔끔하다.

Sapper와 비교해보세요.

프로젝트 구조

SvelteKit

우선 Sapper의 프로젝트 구조를 살펴보자.

화면과 마찬가지로 상당히 우아하다.

Sapper

이어서SvelteKit.

고찰하다.

프로젝트 구조는 거의 같지만 가장 큰 차이점Sapper은 모듈 트리거SvelteKit를 사용하지 않는다는 것이다.
이용Snowpack은 사용Snowpack과 Webpack의 상황보다 빨리 개발할 수 있다.
한편Rollup은 SSR(서버측 구현)을 실현하는 기구를 준비했지만 Sapper는 현재 없는 것 같다.
공식 블로그에 SvelteKit와 협업해 SSR 준비를 했다는 기술이 있는데 추후 추가되겠죠.

소스 코드

SvelteKit

<script>
    import Counter from '$components/Counter.svelte';
</script>

<main>
    <h1>Hello world!</h1>

    <Counter/>
    <p>Visit the <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>

<style lang="scss">
    :root {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    main {
        text-align: center;
        padding: 1em;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 100;
        line-height: 1.1;
        margin: 4rem auto;
        max-width: 14rem;
    }

    p {
        max-width: 14rem;
        margin: 2rem auto;
        line-height: 1.35;
    }

    @media (min-width: 480px) {
        h1 {
            max-width: none;
        }

        p {
            max-width: none;
        }
    }
</style>

이것은 보통 Snowpack 코드입니다.
설치에도 써놨지만 갑자기 써줘서 고마워Svelte또한 SCSS에 별명을 설정했기 때문에 구성 요소를 가져올 때의 경로 쓰기는 Snowpack와 다르다.

Sapper

<script>
    import successkid from 'images/successkid.jpg';
</script>

<style>
    h1, figure, p {
        text-align: center;
        margin: 0 auto;
    }

    h1 {
        font-size: 2.8em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0.5em 0;
    }

    figure {
        margin: 0 0 1em 0;
    }

    img {
        width: 100%;
        max-width: 400px;
        margin: 0 0 1em 0;
    }

    p {
        margin: 1em auto;
    }

    @media (min-width: 480px) {
        h1 {
            font-size: 4em;
        }
    }
</style>

<svelte:head>
    <title>Sapper project template</title>
</svelte:head>

<h1>Great success!</h1>

<figure>
    <img alt="Success Kid" src="{successkid}">
    <figcaption>Have fun with Sapper!</figcaption>
</figure>

<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>

이것은 보통 Sapper 코드입니다.Svelte 별도로 설치해야 합니다.
여기.에 설치 방법 요약

고찰하다.

인코딩은 선택SCSS이나 선택SvelteKit이나 크게 다르지 않았다.
원래Sapper는 상당히 쓰기 쉬운 프레임워크이기 때문에 인코딩의 간단성은 거기에서 나온 것이라고 생각한다.

Sapper에서 Svelt Kit로의 전환 정보

이는 공식 블로그에서 언급됐지만 이전으로 인한 부담은 적다.
프로젝트 구조와 원본 코드는 큰 차이가 없는데, 나는 확실히 이렇다고 생각한다.
SSR 관련 부분만 수정한다는 기록이 있는데 이 역시 해소되는 추세가 되겠죠.

총결산

한번 해봤어요Svelte,너무 기대돼요!
이제 오븐이 시작됩니다. 계속해서 동향을 추적하세요!
아직 라이트 등 메인 포장이 안 들어갔는데 한번 해보면 저도 글을 쓸 거예요