kitak's blog

Kみたいなエンジニアになりたいブログ

rollup で Vue コンポーネントの npm パッケージを作る時に SSR も考慮する

お手伝いしている会社で、対応したやつのメモ。

Vue のコンポーネントを複数のプロジェクトで共有するために npm パッケージ化しているときに遭遇した問題。 Vue コンポーネントを npm パッケージ化する — Vue.js 等を参考にパッケージを作っている場合は、ブラウザで動作させる前提のバンドルファイルが生成されるので、これを SSR に利用すると、documentなどのブラウザのAPIにアクセスしてエラーになる。

対応としては、SSR 用のバンドルファイルを別に用意して、実行するプラットフォームに応じて利用するバンドルファイルを切り替える。 具体的には、rollup の場合、Examples | Rollup Plugin Vue に書かれているオプションを指定すると SSR 用のバンドルファイルが生成される。

切り替えは nuxt の場合、以下のようにプラットフォームごとにプラグインのファイルを用意して

foo-ui-client.js

import Vue from 'vue'
import FooUI from 'foo_ui'
Vue.use(FooUI)

foo-ui-server.js

import Vue from 'vue'
import FooUI from 'foo_ui/dist/ssr'
Vue.use(FooUI)

プラグインの設定で、作成したファイルに対して適切な mode を指定する。

plugins: [
  ....,
  { src: '@/plugins/foo-ui-client.js', mode: 'client' },
  { src: '@/plugins/foo-ui-server.js', mode: 'server' },
 ],