Svelte3에서 Typerscript, Pug, Sass 사용 가능 설정

Svelte3 프로젝트의 단계에 대한 의사록을 설정합니다.
아래의 방법을 사용할 수 있다.

typescript

pug

sass

jest

eslint

Svelte3 소개

웹 프런트엔드 개발을 위한 프레임워크입니다.
응용 프로그램은 Vue SFC 와 비슷한 태그, 스크립트, 스타일 패키지가 한 파일에 있는 Svelte 구성 요소로 구현됩니다.
라이브러리가 아닌 전송기로 작동하며 제작 후 브라우저에서 실행할 수 있는 JavaScierpt와 CSS를 출력합니다.
따라서 운행 시간 라이브러리에 명확하게 편입할 필요가 없다.코드에 없어도 import 컴파일할 때 필요한 코드를 삽입합니다.
또한 표준 웹 Components를 구축할 수도 있습니다.
공식 홈페이지는 여기->Svelte • Cybernetically enhanced web apps

프로젝트 초기화

Svelte 공식 템플릿 창고sveltejs/template를 사용하여degit[1]로 프로젝트를 제작하는 모델입니다.
다음 명령을 실행하면 됩니다.

$ npx degit sveltejs/template <プロジェクト名>
$ cd <プロジェクト名>
$ yarn install

다음 파일 그룹을 생성합니다.
파일 트리 보기

❯ tree -I node_modules
.
├── README.md
├── package.json
├── public
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
├── scripts
│   └── setupTypeScript.js
├── src
│   ├── App.svelte
│   └── main.js
└── yarn.lock

동작 확인

다음 명령을 사용하여 개발용 서버를 시작합니다.

$ yarn dev

시작 후 방문http://localhost:5000.다음 페이지만 보이면 OK.

Type script 사용

기본값은 JavaScript로 구현되지만 TypeScript로 구현되는 방식으로 설정된 스크립트가 준비되어 있습니다.
를 실행하면 src 디렉토리의 JavaScript를 TypeScript로 덮어씁니다.

$ node scripts/setupTypeScript.js
$ yarn install

실행 후 파일 보기
rollup.config.이외의서류는?TS로 변환하고 App으로 변환합니다.svelte 내에서도 Type Script로 덮어씁니다.

❯ tree -I node_modules
.
├── README.md
├── package.json
├── public
│   ├── build
│   │   ├── bundle.css
│   │   ├── bundle.js
│   │   └── bundle.js.map
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
├── src
│   ├── App.svelte
│   └── main.ts
├── tsconfig.json
└── yarn.lock

yarn dev에서 개발용 서버를 시작하고 http://localhost:5000에 접근할 수 있다면 OK.표시되는 내용은 TypeScript가 활성화되기 전과 다릅니다.

Pug 및 Sass 가져오기

TypeScript를 사용하면 svelte-preprocess가 devDependencies에 추가됩니다.
Pug과 Sass가 쓴 코드의 변환을 지원하기 때문에 설정 없이 가져올 수 있는 것은 거의 없다.

Pug

Pug는 루비Slim와 유사한 문법으로 HTML을 설명할 수 있는 템플릿 엔진이다.
다음 명령을 사용하여 Pug를 설치합니다.

yarn add -D pug

src/App.svelte를 열면 다음과 같은 HTML 부분이 있습니다.
src/App.svelte

<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>

Pug로 이것을 아래의 모양으로 고쳐 쓰세요.
src/App.svelte

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

개발 서버를 시작하고 표시할 수만 있다면 OK.

Sass

Sass도 Pug과 같습니다.모듈만 추가하면 사용할 수 있습니다.

$ yarn add -D sass

src/App.svelte를 열고 다음 방식으로 <style> 부분을 다시 씁니다.
src/App.svelte

<style lang='sass'>
  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>

개발 서버를 시작하고 표시할 수만 있다면 OK.

Jest의 가져오기

필요한 모듈을 먼저 설치합니다.

$ yarn add -D jest ts-jest ts-node @types/jest @testing-library/svelte svelte-jester @testing-library/jest-dom

Jest의 설정 파일을 만듭니다.최소한 이런 느낌.
jest.config.ts

export default {
  clearMocks: true,
  coverageDirectory: 'coverage',
  moduleFileExtensions: ['js', 'ts', 'svelte'],
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.svelte$': ['svelte-jester', { preprocess: true }],
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
  },
};

rollup.config.js에서 같은 설정이 있지만 Jest에서 rollup을 사용하지 않기 때문에 Svelte 설정 파일을 추가합니다.
svelte.config.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess({ sourceMap: true }),
};

테스트 코드에 사용되는 함수 등의 형식 정의를 읽기 위해 tsconfig입니다.json에 설정을 추가합니다.
tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {                      //  <= 追加
    "types": ["svelte", "jest", "node"],    //  <= 追加
  }                                         //  <= 追加
}

그리고 앱.svelte 코드를 테스트하는 것은 이런 느낌입니다.
__test__/App.test.ts

import { render } from '@testing-library/svelte';
import App from '../src/App.svelte';

test('should render', () => {
  const results = render(App, { props: { name: 'world' } });

  expect(() => results.getByText('Hello world!')).not.toThrow();
});

실행하기 편리하도록.json의scripts에 추가test.
package.json

{
// 〜 略 〜
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "validate": "svelte-check",
    "test": "jest"  // <== 追加
  },
// 〜 略 〜
}

그리고 yarn test에서 잘못된 집행이 없으면 OK.

ESlint 가져오기

Svelte3에서 ESLiteslint-plugin-svelte3[2]를 사용합니다.
다음 명령을 사용하여 가져옵니다.

$ yarn add -D eslint eslint-plugin-svelte3 eslint-plugin-jest
$ ./node_modules/.bin/eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
# 〜 略 〜
Successfully created .eslintrc.yml file in /Users/hero/Develop/javascript/svelte3-ts-pug-sass-template

$ yarn install
$ rm package-lock.json

위 작업을 수행한 후eslintrc.js를 완성했지만 Svelte3은 필요한 설정을 포함하지 않기 때문에 추가합니다.
추가된 것은 다음과 같다.svelte와 주석의 부분은 Svelte3의 설정입니다.jest의 주석은 Jest의 설정이다.
.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'jest/globals': true,             // <== svelte
  },
  extends: [
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'svelte3',                        //<== svelte
    '@typescript-eslint',
    'jest',                           // <== jest
  ],
  overrides: [                        // <== svelte
    {                                 // <== svelte
      files: ['*.svelte'],            // <== svelte
      processor: 'svelte3/svelte3',   // <== svelte
    },                                // <== svelte
  ],                                  // <== svelte
  ignorePatterns: [
    'public/build/*',
  ],
  settings: {                         // <== svelte
    'svelte3/typescript': require('typescript'), // eslint-disable-line global-require
    'svelte3/ignore-styles': (attributes) => attributes.lang && attributes.lang === 'sass',
  },
  rules: { // これらは最小限必要と思う。その他ルールの追加はお好みで。
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'import/no-mutable-exports': 'off',
    'import/prefer-default-export': 'off',
  },
};

나는 YAML 형식을 좋아하지만 settings에서 함수를 설정해야 하고 자바스크립트 형식이 필요하다.
그리고 아래와 같은 패키지.json Script를 추가하면 편리합니다.
package.json

  "scripts": {
      "eslint": "eslint --ext svelte,js,ts ./"
    },

그리고 다음 명령에서 자동으로 수정할 수 있는 곳을 미리 수정한다.

$ yarn elint --fix

자동 수정이 불가능한 곳은 손으로 수정한다.

개발 환경

개발을 지원하는 주변 도구에는 이런 것이 있다.

REPL

웹 브라우저에서 쉽게 시도할 수 있습니다.기능을 살짝 시험해 보니 편리할 것 같다.

Hello world • REPL • Svelte

편집기 확장

VSCODE의 확장을 공식적으로 제공합니다.

Svelte for VS Code - Visual Studio Marketplace

브라우저 확장

지금은 공식적인 게 없는 것 같은데 몇 개 있어요.

Svelte Devtools

VueVue.js devtools의 확장을 지원합니다.

Chrome

Firefox

Svelte Sight

Svelte Devools와 유사한 응용 프로그램의 확장으로 여겨지지만 구성 요소의 등급을 도형적으로 표시할 수 있습니다.

Chrome

이렇게 되면 개발 환경을 갖추게 된다.

참고 자료

svelte-preprocess Pug

svelte-preprocess scss, sass

Svelte with TypeScript and Jest (Starter Project)

최후

이 절차를 실행한 후의 상태를 다음 창고에 저장합니다.
HeRoMo/svelte3-ts-pug-sass-template: Svelte3 App template with Typescript, Pug, Sass, Jest and ESLint
각주
Giit 창고를 로컬로 복제하는 명령줄 도구입니다.https://github.com/Rich-Harris/degit ↩︎
v3.1.0에는 Type Script에 해당하는 Svelte 모듈도 있습니다.↩︎