RightTouchエンジニアチームを知る10問10答

<html><head></head><body><h1 id="Rollup + Svelte + Typescriptの環境構成[2023/9版]">Rollup + Svelte + Typescriptの環境構成[2023/9版]</h1>
RightTouchのプロダクトは様々な技術を用いて開発されています。特にフロントエンドに関しては既存の技術スタックにとらわれず必要に応じて新しい技術を取り入れているため、同じプロダクトの中でも機能によって複数のフレームワークが使い分けられたりしています。
この記事ではSvelteとTypescriptのコードをRollupでバンドルしてるプロジェクトの環境構成について紹介をしていきたいと思います。
<h2 id="はじめに">はじめに</h2>
まずはRollup + Svelete + Typescriptの環境で基本的に必須になる以下のパッケージをインストールします。
<ul>
<li>rollup</li>
<li>rollup-plugin-svelte</li>
<li>svelte</li>
<li>svelte-preprocess</li>
<li>typescript</li>
</ul>
<h2 id="rollupプラグインの選定">rollupプラグインの選定</h2>
次は環境や必要な機能に応じてrollupのプラグインをインストールしていくのですが、かなり数が多いです。しかも<a href="https://github.com/rollup/awesome?tab=readme-ov-file#awesome-rollup-" target="_blank" rel="noreferrer">公式のプラグイン紹介ページ</a>にあるものに絞っても同じようなのが複数あったりしてどれを使えばいいのかぱっと見だとわかりません。例えばTypescriptに関するプラグインだけでも4つ(typescript, ts-paths, ts, typescript2)存在してます。
とりあえず今回はプラグインの数をできるだけ減らしつつ<a href="https://github.com/rollup/plugins/tree/master?tab=readme-ov-file#rollup-plugins" target="_blank" rel="noreferrer">公式が提供しているプラグイン</a>のみを採用する方針にしました。サードパーティ製は公式プラグインの改良版的なものだったりして高機能でダウンロード数が多いケースもあるのですが、マイグレーションによる不具合対応等のメンテナンスがされなくなってくることも多いので長期的な保守性を優先しました。
<h2 id="採用したパッケージ">採用したパッケージ</h2>
<ul>
<li>@rollup/plugin-alias
<ul>
<li>tsconfigのbaseUrlとpathsに相当するpathの変換に使用</li>
<li>swcのconfigにもbaseUrlとpathsはあるがrollup.config.jsで指定した時の仕様がtsconfigの時と変わるのでこのプラグインで対応</li>
</ul>
</li>
<li>@rollup/plugin-commonjs &amp; @rollup/plugin-node-resolve
<ul>
<li>すべてのmoduleがESM対応でない限りおそらく必須</li>
</ul>
</li>
<li>@rollup/plugin-replace
<ul>
<li><code>process.env.NODE_ENV</code> のreplaceに使用</li>
</ul>
</li>
<li>@rollup/plugin-swc
<ul>
<li>swcはrust製のビルドツールで、babelの代わりにswcを用いてトランスパイルを行う</li>
<li>おそらく開発版(version 0.2.0)だがviteがswcを一部のプラグインで採用していたりbabelからの移行が進みそうなので採用</li>
<li>(10/10追記) <a href="https://github.com/rollup/rollup/blob/master/CHANGELOG.md#features" target="_blank" rel="noreferrer">rollup 4でswcが採用された</a>のでrollup 4にマイグレーションする際は不要になりそう</li>
</ul>
</li>
<li>@rollup/plugin-terser
<ul>
<li>swc標準のminifyより有意に圧縮できていたので採用</li>
</ul>
</li>
<li>autoprefixer &amp; postcss
<ul>
<li>CSSのベンダープレフィックスをいい感じにしてくれる</li>
<li>今回CSSはsvelteのコード内にしかないのでsvelteのpluginとして設定</li>
</ul>
</li>
<li>svelte-check
<ul>
<li>svelteだけでなくCSSやTSの型チェックもやってくれる</li>
<li>CLI用なのでrollupのpluginとして組み込んでバンドル時に実行するようにしてる</li>
<li>自分でプラグインを開発できる</li>
</ul>
</li>
</ul>
<h2 id="rollup.config.js">rollup.config.js</h2>
以下がrollupの設定ファイルです。
<pre><code class="language-jsx hljs">import { readFileSync } from 'node:fs';
import { spawn } from 'node:child_process';
import path from 'node:path';
import alias from '@rollup/plugin-alias';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import swc from '@rollup/plugin-swc';
import terser from '@rollup/plugin-terser';
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import autoprefixer from 'autoprefixer';

// バンドル時にsvelte-checkを実行させるplugin
// プラグインの作り方はここ https://rollupjs.org/plugin-development/
function typeCheck() {
 const args = ['--compiler-warnings', 'css-unused-selector:ignore'];
 const options = {
 stdio: ['ignore', 'inherit', 'inherit'],
 shell: true,
 };
 return {
 name: 'type-check',
 writeBundle() {
 spawn('svelte-check', args, options);
 },
 };
}

export default {
 input: {
 main: 'src/main.ts',
 },
 output: {
 dir: 'dist',
 format: 'esm',
 },
 plugins: [
 alias({
 entries: { '~': path.resolve('src') },
 }),
 replace({
 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
 preventAssignment: true,
 }),
 resolve({
 extensions: ['.ts', '.svelte'],
 browser: true,
 }),
 commonjs(),
 svelte({
 preprocess: sveltePreprocess({
 postcss: {
 // ここは勝手に.browserslistrcを参照してくれる
 plugins: [autoprefixer()],
 },
 }),
 emitCss: false,
 // svelte-checkのwarnと重複するのでこっちを非表示にする
 onwarn: () =&gt; {},
 }),
 swc({
 swc: {
 env: {
 // .browserslistrcを自動参照してくれないようなのでファイル読む
 // https://github.com/swc-project/swc/issues/3365
 targets: readFileSync('./.browserslistrc', 'utf-8').replace('\n', ','),
 },
 jsc: {
 parser: {
 syntax: 'typescript',
 },
 // browserslistによるtargetとdefaultのes5が競合してしまうのでnullを入れる
 target: null,
 },
 },
 }),
 terser(),
 typeCheck(),
 ],
};
</code></pre>
<h2 id="マイグレーション">マイグレーション</h2>
最近rollupのエラー対応してる時に幾つかのプラグインがdeprecatedになっていて別のプラグインを推奨されたことがきっかけでマイグレーションを行い現在の構成になりました。初めは最小限の対応で済まそうと思いましたが、パッケージバージョンの相互依存が複雑だったり古いバージョンの仕様やドキュメントを確認するのが大変だったので全部最新までマイグレーションすることにしました。
<a href="https://rollupjs.org/migration/" target="_blank" rel="noreferrer">rollup 2 → 3</a>, <a href="https://svelte.jp/docs/v4-migration-guide" target="_blank" rel="noreferrer">svelte 3 → 4</a>が対応した主なメジャーアップデートになります。基本的にはそれぞれのドキュメント通り進めていけば大丈夫たと思いますが、<a href="https://svelte.jp/docs/v4-migration-guide#:~:text=module%20resolution%20configuration.-,For%20Rollup%20this%20is%20done%20within%20the%20%40rollup/plugin%2Dnode%2Dresolve%20plugin%20by%20setting%20browser%3A%20true%20in%20its%20options.%20See%20the%20rollup%2Dplugin%2Dsvelte%20documentation%20for%20more%20details,-For%20wepback%20this" target="_blank" rel="noreferrer">svelte 4へのマイグレーションに伴う@rollup/plugin-node-resolveの設定の変更</a>はbuild時にエラーが出ず、一部の挙動がおかしくなる程度の症状なので意外とはまりポイントかもしれません。
期間が空いてしまうとすべてを一気にマイグレーションする羽目になり、結果的に工数も膨れ上がったり不具合のリスクも高くなってくるので、これを機にこまめにchange logをチェックして対応していこうと思います。
コードの規模がそこまで大きくなく開発時のHMRのパフォーマンスもさほど重要ではなかったためRollupのままでマイグレーションを行いましたが、<a href="https://svelte.jp/docs/svelte-compiler#:~:text=Svelte%20%E3%83%81%E3%83%BC%E3%83%A0%E3%81%8C%E6%9C%80%E3%82%82%E6%8E%A8%E5%A5%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%80%81%E3%81%BE%E3%81%9F%E6%B3%A8%E5%8A%9B%E3%82%82%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%90%E3%83%B3%E3%83%89%E3%83%A9%E3%83%BC%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AF%20vite%2Dplugin%2Dsvelte%20%E3%81%A7%E3%81%99%E3%80%82" target="_blank" rel="noreferrer">svelteの開発チームは現在viteのプラグインの方を推奨している</a>ので、特に新規開発や大規模なアプリケーションにおいてはViteの方が良いかもしれません。
<h2 id="最後に">最後に</h2>
今回はとりあえず動く程度のsvelte+TS+rollupの構成の紹介になりましたが、より良いパフォーマンスや型安全性等を目指してeslint, tsconfig, swcconfigの設定周りも紹介できればと思います。
<h2 id="一緒に働くメンバーを募集中">一緒に働くメンバーを募集中</h2>
RightTouchでは、エンジニアをはじめメンバーを募集しています！エンジニアリングだけでなく、プロダクトのコアやコンセプト創り、そして事業拡大における戦略・戦術検討まで、幅広く関われる今のRightTouchに興味を持っていただけたら、ぜひこちらの募集概要もご覧ください。気軽にお話しできればと思います！
${RECRUIT_LINK}
また、Wantedlyでもエントリーを受け付けています。応募を悩まれている方は、まずはブックマークを登録ください。 
${WANTEDLY_LINK}
</body></html>