Svelte 시작 환경 구성, 폴더 구성에 대한 메모

Vue.js보다 50배 빨라서 앞부분 근처에서 주목받나요?svelte.제이스를 살짝 건드려서 메모로 정리했어요.

환경 구축 프로그램

Vue.제이스처럼 CDN만 붙이고 할 수 있는 게 없어요.
우선, 노드.전제 조건은 js가 설치되어 있으며 npx 명령으로 프로젝트를 만들어야 합니다.

생성 공정

npx 명령을 실행하여 새 프로젝트를 만듭니다.

npx degit sveltejs/template my-project

npx 명령은 node입니다.js를 설치하면 따라올 것 같지만 자신의 환경에서 식별되지 않는다.이 경우 npx를 따로 설치해야 합니다.

$ npm install -g npx

프로젝트 폴더npm install로 이동합니다.

cd my-project/
npm install

package.json을 열면npm install 명령으로 설치된 패키지를 확인할 수 있습니다.

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

서버 시작

설치가 완료되면 npm run dev 명령을 실행합니다.Your application is ready~!가 표시될 때 서버가 시작되었으니 http://localhost:5000를 방문하십시오.
그리고 svelte의 초기 화면!대화 상자.

  Your application is ready~! 

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

Svelte 시작 화면

Svelte의 환경 구축은 위와 같다.
HELLO WORLD가 표시되기 10분 정도 전에 완료되었습니다.

폴더 구성 확인

그런 다음 폴더 구성을 확인합니다.
프로젝트가 만들어진 폴더는 다음과 같습니다.
src 폴더 아래에는 App.svelte와 main.js가 저장되어 있으며, 이 두 파일은 처음 시작할 때의 HELLO WORLD 화면을 만들었다.

project
 ├─node_modules
 │
 ├─public
 │  └─build
 ├─scripts
 └─src　←ここにあるファイルを編集する

각 파일을 열어 원본 코드를 확인했습니다.App.svelte의{name}부분main.js에 쓰여진proops의 값이 귀속된 것 같습니다.
src/App.svelte

<script>
    export let name;
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

src/main.js

import App from './App.svelte';

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

export default app;

총결산

이번에는 폴더 구성 확인으로 가져옵니다.
Vue처럼 CDN을 읽어 쓸 수 없기 때문에 프런트 홀을 적극적으로 개발하지 않으면 도입이 어려울 수 있다.
그럼에도 불구하고 실행 속도는 Vue의 50배이고 견본만 보면 문법이 매우 간단하며 일본어 문서가 더욱 충실해지면 보급될 수 있다.
다음은 Svelte 공식 실장 예시를 참고해서 뭘 하고 싶은데요.
https://svelte.dev/examples#hello-world