Zenn
📝

Svelte3 で Typescript,Pug,Sassを使える様にセットアップする

2021/02/01に公開
Pug
Sass
TypeScript
Svelte
Svelte 3
tech

Svelte3 のプロジェクトをセットアップする手順のメモ。
次を使えるようにする。

  • typescript
  • pug
  • sass
  • jest
  • eslint

Svelte3 とは

Web フロントエンド開発のためのフレームワーク。
Vue の SFC によく似たマークアップ、スクリプト、スタイルが１ファイルにパッケージされた Svelte コンポーネントとしてアプリケーションを実装する。
ライブラリではなくトランスパイラとして働き、ビルドするとブラウザで実行できる JavaScirpt と CSS を出力する。
なので、ランタイムライブラリを明示的に組み込む必要はない。コードの中で import しなくてもコンパイル時に必要なコードが組み込まれる。
また標準で Web 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。

Svelte App

Typescript を有効にする

デフォルトは JavaScript での実装となっているが、TypeScript で実装できるようにセットアップするスクリプトが用意されている。

実行すると、src ディレクトリ内の JavaScript が TypeScript に書き換えられる。

$ node scripts/setupTypeScript.js
$ yarn install
実行後のファイル一覧を見る

rollup.config.js 以外の .js ファイルは .ts に変換されるし、App.svelte 内も TypeScript に書き換えられている。

❯ 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 は Ruby の 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"],    //  <= 追加
  }                                         //  <= 追加
}

そして、App.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();
});

実行しやすいように package.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 で ESLint を使うには eslint-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/******/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 で関数を設定する必要があり、JavaScript 形式が必須となる。

さらに次の様に packasge.json の Script を追加しておくと便利。

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

で、次のコマンドで、自動で修正できるところを修正しておく。

$ yarn elint --fix

自動修正できない箇所は手で直す。

開発環境

開発をサポートする周辺ツールはこんなのがある。

REPL

Web ブラウザで気軽に試すことができる。ちょっと機能を試すのに便利そう。

エディタ拡張

VSCode のエクステンションが公式に提供されている。

ブラウザ拡張

今のところ、公式のものはなさそうだけど、いくつか存在する。

Svelte Devtools

Vue のVue.js devtoolsに相当する拡張。

Svelte Sight

Svelte Devtools と類似の用途の拡張だと思われるが、コンポーネント階層がグラフィカルに表示できる。

これで一通りの開発環境が整う。

参考

最後に

この手順を実施したあとの状態を次のリポジトリにおいておく。

HeRoMo/svelte3-ts-pug-sass-template: Svelte3 App template with Typescript, Pug, Sass, Jest and ESLint

脚注

  1. Git リポジトリをローカルにコピーするコマンドラインツール。 https://github.com/Rich-Harris/degit ↩︎

  2. v3.1.0 で TypeScript の Svelte モジュールにも対応した。 ↩︎

Discussion