Snowpackでアプリ開発_その1

この記事では Snowpack を使用したアプリ開発について、その導入から公開までを全３回に渡って紹介する。

第一回では Snowpackの概要と、インストールするまでを記す。

snowpack とは？

以下は公式の要約。

概要

バンドルに伴う時間や手間を削減し、ダイレクトにブラウザでコードを走らせることで、開発環境を向上させるためのビルドツール。

ソフトウェアの性能向上というよりは、DX（開発者体験）の向上を目指したものと捉えられる。

下記のような特徴が公式では述べられている。

ESMimport を可能とするものである。
プロジェクトが大きくなった際もビルドも早い。
webpack をはじめとしたバンドラーと異なり、バンドルを行わない。
TypeScript, JSX, React, Vue などの多くのライブラリに対応

また公式においては、「新時代の Web 開発を指向したビルドシステム」として紹介されている。

Snowpack 2.0 is a build system designed for this new era of web development.

O(1)ビルドシステム

ビルド（バンドル）システムは一般的に複雑で時間のかかるものと見なされる。従来のビルドを、計算量の多い O(n)のシステムだとするならば、Snowpack は O(1)のシステムだと言える。

メリットとして以下が挙げられる。

速さ
予測可能性
簡易さ
プロジェクトサイズの大きさとビルドの関係性がシンプル
- これまでのビルドだと、npm package の依存関係から、プロジェクトの肥大化に伴いビルド時間も指数関数的に増大するリスクがあった。
個別のファイルはキャッシュされる
- ファイルに変更がないのであれば、再ビルドされることはない（コスト削減）。

引用: https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/

使用感

早い。気持ち良い。

提供されている React テンプレートを実行しただけなので、これがプロジェクトの肥大化に伴いどのような結果になっていくのかはまだ不明だ。しかし今の所は体感として、Webpack よりもかなり早い。

インストール

インストールの手順にはいくつく方法があるが、ここでは公式で推奨されているcreate-snowpack-appを使用して、React-TypeScript プロジェクトを作成する。

はじめに Snowpack をインストールする

1
2


# install
npm install --save-dev snowpack

続いてプロジェクトファイルを作成する
この時にcreate-snowpack-appコマンドを実行する。
このコマンドは Snowpack をインストール時に同時にインストールされるため、別個にインストールする必要はない(React や Vue の場合は、Scaffolding ツールのインストールも別個必要なため、この辺りの手間の削減はありがたい)

1
2


# create new project
npx create-snowpack-app [NEW_DIR_NAME] --template [TEMPLATE_NAME]

いくつかのボイラープレートの中から、作成するプロジェクトに合わせたものを選択することができる。
今回は@snowpack/app-template-react-typescriptを使用。

インストール結果

以上でアプリのベースは完成する。今回インストールされた npm-package は、以下。eslint は入らなかった。

react, react-dom
typescript
jest, testing-libray/jest-dom, testing-library/react
prettier
各種@types ファイル

初期に設定されている npm-script は以下。シンプルなコマンドでランやビルドが実行可能。prettier のスクリプトも作られるのは嬉しい。

1
2
3
4
5
6
7
8
9


{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "jest",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
  }
}

以上で足回りの作成は完了。

出力ファイル群の一覧は別途記す。

Tree Shaking やってくれる？

大丈夫そう。

ビルド時にアプリのコードをスキャンし、デッドコードを削除してくれる。

Snowpack v1.0 added an initial “scan” phase behind the –optimize flag. It runs a quick scan of your app to learn how you use each dependency.
… and that’s it! We pass that info to our internal installer (powered by Rollup) and eliminate any dead code at install time.

Tree-Shaking Without a Bundler? Here’s How Snowpack Does It!

CSSや画像のインポートはとんな感じ？

特段の設定をすることなく、とても簡単にインポートできる。

例えばCSSのインポートについて。CSSのインポートはブラウザではネイティブではサポートされていない。そのため、これまではwebpackなどのバンドラーを使用し、cssファイルの読み込み方法の設定を行う必要があった。

Snowpackではデフォルトでこの辺りが調整されるようになっている。そのため、特別な設定をすることなく、以下のようにコードを書き始めることができる。

1

import './style.css'

また、 CSS Modulesとしてもインポートすることができる。名前空間を持たせることへの労力削減に役立つ。

1
2
3
4


/* src/style.module.css */
.error {
  background-color: red;
}

1
2
3
4


import styles from './style.module.css' 

// This example uses JSX, but you can use CSS Modules with any framework.
return <div className={styles.error}>Your Error Message</div>;

長くなるため詳細は割愛するが、その他のファイルJSON, 画像についても、類似の方法でインポートすることができる。
https://www.snowpack.dev/#import-images-%26-other-assets

styled-componentなどと組み合わせることも可能なようだ(次回の記事で試す)。

おわりーその２に続く

今回はインストールまでを見た。
細かい仕様や設定については、次回(作成中)に記載する。

補足

create-snowpac-app の実行結果

create-snowpack-app コマンドによって作成された React-TypeScript プロジェクトの実行結果。

ビルドを実行するとと、build ディレクトリが生成される。この際

buid/dist/ディレクトリにアプリコードが、
buidl/web_modules/ディレクトリに npm-package が、

それぞれバンドルされずに（それぞれが単一のファイルとして）出力される。

[AppName]/
  - build/
    - _snowpack_/
    - _dist_/
    - web_modules/
    - favicon.ico
    - index.html
    - robots.txt
  - node_modules
  - public/
  - src/
  - types/
  - .gitignore
  - .prettierrc
  - babel.config.json
  - jest.config.js
  - jest.setup.js
  - package.json
  - snowpack.config.json
  - tsconfig.json