ビルドツール素振り(Rollup編)
Rollup を使ったビルド設定をやってみる
例によって、 ヌケニンフォルダ から始めます。(詳しくは こちらの記事 を参照ください。)
まず、 Rollup 本体をインストールします。
$ yarn add -D rollup
次に、必要なプラグインをインストールします。一度にやっていますが、実際にはビルドしてみる → エラー内容から足りないものを追加していく、という手順を繰り返しました。
$ yarn add -D @rollup/plugin-typescript
$ yarn add -D tslib
$ yarn add -D rollup-plugin-css-only
$ yarn add -D @rollup/plugin-node-resolve
$ yarn add -D @rollup/plugin-commonjs
$ yarn add -D rollup-plugin-html2
tslib は、 @rollup/plugin-typescript の README に Note that both typescript and tslib are peer dependencies of this plugin that need to be installed separately. とあるため、追加でインストールしています。
各種プラグインは、とりあえず ↓ から探しました。
Rollup は、ビルド設定を rollup.config.js に書くようになっていますので、これを作成します。個人的な所感ですが、最終的な option (export するオブジェクト)を生成する部分と、プラグインを並べる部分とを分けて書いたほうが書きやすいと感じました。
最後に、 package.json 内の script を以下のように書き換えます。
"scripts": {
- "start": "echo start",
- "build": "echo build",
+ "start": "rollup -c -w",
+ "build": "rollup -c",
"test": "echo test"
},
全体的な流れとしてはここまでなのですが、設定途中で以下のような問題に直面しました。
@rollup/plugin-bundle-html 利用時の問題
ビルド結果として、bundle 後の js を埋め込んだ html ファイルを一緒に吐くようにしたかったため、 @rollup/plugin-bundle-html を利用しようとしました。しかし、下記の issue と同じ事象に当たってしまい、うまくいきませんでした。
結局、代わりに rollup-plugin-html2 を利用しました。(README が不穏で敬遠していたのですが、一応動きました...。)
別問題として、js(tsx)を変更し hot reload されたとき、js の変更は反映されるが style の適用が無くなるということがありました。
html を確認すると、hot reload 後に stylesheet の link タグが消失していることが原因のようでした。
良い解決策が見つからず、仕方なく externals option に css ファイルの出力名と同じ名前を指定することで回避しました。
const plugins = [
// ...
css({ output: 'bundle.css' }),
html2({
fileName: 'index.html',
template: 'public/index_template.html',
externals: [{
file: 'bundle.css',
pos: 'before'
}]
}),
しかしこの設定だと、初回読み込み時に stylesheet の link タグが二重に埋め込まれてしまいます。よりよいやり方をご存知の方は教えて下さい...！(そもそもこのプラグインを使わないほうが良いという話な気もする)
ビルド時、 Uncaught ReferenceError: process is not defined が起こる問題
下記 issue に記載がありました。
Rollup 作者の reply に従い、 @rollup/plugin-replace をインストールした上で、以下の設定を加えました。
import replace from '@rollup/plugin-replace';
export default {
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
],
};
まとめ
Svelte のテンプレートリポジトリでは Rollup によるビルド設定が含まれて いたり、Vite の build option として Rollup のオプションをそのまま指定 するようになっていたりするため、個人的には良いキャッチアップの機会になってよかったです。ビルド設定については、Parcel ほどの楽さは無いものの、webpack と同等かそれ以下ぐらいの難易度、という感触でした。
ここまでの結果は下記に置いています。
引き続き、他のビルドツールの記事も書いていきます！