ウェブサイト制作にRollupを使う〜2021年2月更新〜
どうも!
大阪府松原市でウェブを中心としたソフトウェア開発を行っています。
コワーキングスペース松原ガレッジ管理人の五島です。
今日はRollupの話を少ししようかな〜と軽快に記事を書いてます!
設定はよっ(｀･ω･´)という方はこちらのGitHubリポジトリを御覧ください。
目次はこちら
Rollup自体は特に利用しなくても、JavaScriptを実行することはできます。
しかし、 JavaScriptの新しい記法(ES2015またはES6)を利用したいという要望の上で、広いブラウザ対応を行おうと思ったら使っておくとベター(ほぼ必須?)という感じです。
似たようなツールにwebpackというものがありますが、こちらはJavaScriptだけではなく、
CSS、画像など様々なアセットを対象にしたフルコースみたいなものです。
ググるとわかりますが、様々な使い方やバージョン話の情報が出てくるためフィルタリングのコストがかかってしまうなという印象です。
このような理由で、ウェブサイト制作においてはRollupの軍配かな〜と思い今後の採用のために調査しています。
今回の記事では、 * babelを利用してJavaScript新しい記法をIE11にも対応するための設定 * Stimulus を動作させるための設定 をメモとして記載しています。
準備
- Node.jsはv12.18.2
- npmは7.5.4
という環境で検証を行っています。
npxというコマンドを利用しているので、npmだと5.2.0以上だとそのまま実行可能だと思います。
インストール
ウェブサイト作成を行うフォルダを適当に作成します。
次に
$npm install --save-dev rollup
これでrollupコマンドが利用できるようになります。
設定ファイルを書く
コマンドラインのオプションでファイルを変換することも可能なのですが、今回は設定ファイルを書いていきます。
現在いるフォルダに rollup.config.js という設定ファイルを作成します。
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
}
};
実行は
$npx rollup -c
これでsrc/main.jsを変換してくれます。
formatの部分のiifeは即時関数という形式で出力してくれます。
ウェブ制作でブラウザで実行するという文脈では、この形式を使うでしょう。
基本的な使い方は以上で、後はbabelの設定などを追加していきます。
ES2015(ES6)記法をRollupでIE11に対応させる
babelを利用して変換を行うので、ライブラリを追加します。
また、babelにはPolyfillを追加する機能もあるので、その設定も行っていきます。
babelの7からはPolyfillの設定が少し変わったということで、それも考慮して反映していこうと思います。
$npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env @rollup/plugin-node-resolve core-js@3 @rollup/plugin-commonjs
これを利用する設定をrollup.config.jsに追加
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs'; // requreでのモジュール呼び出しとかに対応する
import { nodeResolve } from '@rollup/plugin-node-resolve'; // node_modulesからライブラリをimportするために対応
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
},
plugins: [
nodeResolve({ browser: true }), // commonjs()の前に
commonjs(), // こっちをbabel()の前に
babel({ babelHelpers: 'bundled' })
]
};
.babelrcを追加
{
presets: [
["@babel/preset-env", {
useBuiltIns: "usage",
corejs: 3 // or 2
}]
]
}
.browserslistrcを追加
ie 11
これで、ES2015記法のJavaScriptをIE11対応へ変換できます。
また対応できてない関数も自動的にoutputに含んでくれます。
実際にinputのsrc/main.jsにテストファイルを置いてみましょう。
window.addEventListener('DOMContentLoaded', () => {
const hoge = () => {
console.log('hoge')
}
hoge()
const ary = (new Array(10)).fill(false)
console.log(ary)
});
constやアロー関数を含んだjsファイルを変換します。
Arrayに対してfillを行っている部分はIE11だと非対応の部分です
rollupを実行するコマンドは以下です。
$npx rollup -c
アウトプットのファイルはbundle.jsなのですが、しっかり変換とPolyfillの追加が行われてそうですね。
https://github.com/Islands5/rollup-sample/blob/main/bundle.js#L702
https://github.com/Islands5/rollup-sample/blob/main/bundle.js#L692
これだけでもだいぶ嬉しい!!
Stimulus の対応
先程の設定がベースになります。
ちょっとしたトリッキーなページに Stimulus を利用したりするのでその設定をしてみようかなと思います。
最終的な設定はこちら
rollup関連で何かやりたいときは、npmのプラグインのページを見るとよさそうなので、他のライブラリを利用する際は検索してみてください https://www.npmjs.com/package/rollup-plugin-stimulus
必要なパッケージをインストールします
$ npm install --save-dev rollup-plugin-stimulus stimulus
その後、各種設定を行います。
rollup.config.jsはこちら
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs'; // requreでのモジュール呼び出しとかに対応する
import { nodeResolve } from '@rollup/plugin-node-resolve'; // node_modulesからライブラリをimportするために対応
import stimulusPlugin from 'rollup-plugin-stimulus';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife',
sourcemap: false
},
plugins: [
stimulusPlugin({
basePath: './src/controllers',
importName: 'stimulus-controllers',
showWarnings: false,
}),
nodeResolve({ browser: true }), // commonjs()の前に
commonjs(), // こっちをbabel()の前に
babel({ babelHelpers: 'bundled' })
]
};
あとはsrc/main.jsを中心にStimulus使うファイルを追加していきます。
https://stimulus.hotwire.dev/handbook/hello-stimulus#it-all-starts-with-html
実際にコンパイルするだけ
(2021年2月現在では、bundle.jsを出力する際にsourcemapに関するエラーが出るのですが、動作はするようです...ただ不安w)
今後も様々なライブラリの利用法を適宜更新していこうと思います。
以上!
