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' }, ],
七都市物語(4)を読んだ
2019年3月4日
鹿児島3日目。足が棒のようになっていて痛い。
最終日は観光をする。まち巡りバスに乗って、城山、西郷洞窟、仙巌園に行った。雨の日で景色はちょっと微妙だったけど、桜島の大きさに感嘆する。 ちょっと駆け足で3時間程度で回った。
お昼は、とんかつ川久に行こうとしたが、行列がすごく一時間待つということだったので夕方に行くことにして、鹿児島中央駅構内のお寿司を食べた。アラやキンメダイなど、白身のお魚をいただく。ねっとりと甘い味でよかった。
身体を休めるために夕方まで天文館近くのスパでのんびりする。足をマッサージしてもらった。痛気持ちいいかんじで、声を出すのをなぜか必死でこらえてしまった。 サウナがフィンランド式っぽい本格的なやつで、ロウリュウのサービスがあると書いてあり期待したが、時間になってもロウリュウは始まらなかった。残念。
鹿児島中央駅に戻って、とんかつ川久へ。17時の開店10分前についたが、既に3,4人並んでいた。開店と同時にぞろぞろ人がやってきてあっという間に席が埋まる。上黒豚ロースカツをいただく。トンカツでこんなレアっぽいのあるの!とびっくりした。箸を入れると脂が流れて、慌てて口に運ぶと口いっぱいに旨味が広がって、うほぉ、となった。とんかつをいつでも食えるぐらいの人間であり続けたい。
とんかつをいただいた後はバスで空港へ。本を読みながら、ぼんやりしていた。飛行機のトラブルで到着が遅れて、家についたのは日付が変わった後。
録画しておいたビジャレアルvsアラベスを見る。前半が終わったぐらいのところで疲れて寝た。
2019年3月3日
鹿児島マラソンに参加。天気はレース中は曇りで、絶好のマラソン日和だった。
4時間半が目標で、最初はゆっくりのペースで始めて、15km毎にペースを上げていくプランだったが、35km地点で急に足が重くなり、勾配のアップダウンが続いたこともあって、ペースダウン。 最終的に4時間44分21秒でフィニッシュ。
直前に30kmLSDもやったのでいけるかなーと思ったけど、甘くなかった。40~50kmのLSDをやるか、長距離ランの最後にビルドアップ走を加えて、終盤にスパートをかけることができる足を作らないとだめだなーという反省。
マラソンの後は、ホテルに戻って次の予定まで休息。
18時から前職の同期のNと、アミュプラザの「いちにぃさん」でご飯を食べる。蒸ししゃぶしゃぶが野菜がホクホク、豚肉の旨味が染みていておいしかった。
2019年3月2日
鹿児島マラソンに参加するために鹿児島へ。
早朝に足に刺激を与えるために6:30~7:00/kmぐらいのペースで5kmを走る。 その後、飛行機で羽田空港から鹿児島空港へ。鹿児島は雨。鹿児島空港から鹿児島中央駅へバスで移動する。大体40分くらい。
移動中「親切すぎるiPhoneアプリ開発の本」を読んでいた。コードをいじくって実験をしながらSDKの解説をしている本で、簡単なチュートリアルをこなした後に読むと自分の中でブラックボックスになっていたアプリの起動の過程とかUIKitのクラスヒエラルキーが頭の中で整理されてよかった。逆に何も知らない状態で読むと、きつそう。
ホテルにチェックインした後に鹿児島中央駅から市電で天文館へ。公園でナンバーカードを受け取る。雨のせいで露天や催し物はガランとしていた。
友人のIさんと落ち合って、むじゃきでしろくまを食べる。
移動で疲れてしまったので、ホテルに戻って、2時間ぐらい横になる。明日がクラシコなので、WOWOWでやっていたクラシコ直前特集(契約なしで見れる)をなんとなく見ていた。鹿児島にいるので、リアルタイムで見れないのが残念。
その後、普段、仕事をしていて、今回マラソンに一緒に参加する福岡の会社のOさん、Hさんと鹿児島中央駅近くの吾愛人で豚しゃぶを食べる。脂が甘くておいしかった。
明日は7時集合なので、早めに寝る。
TypeScript で p5js のスケッチを書くための雛形を作った
Nature of Code -Processingではじめる自然現象のシミュレーション-
- 作者: ダニエル・シフマン,Daniel Shiffman,尼岡利崇,鈴木由美,株式会社Bスプラウト
- 出版社/メーカー: ボーンデジタル
- 発売日: 2014/09/16
- メディア: 大型本
- この商品を含むブログを見る
なんで p5js ?
個人的にとっつきやすいから。
なんで TypeScript ?
VSCode で補完が効くのと、凡ミスを防ぐため。最近は、特に理由がなければ基本的に TypeScript で書いている。
FuseBox を使う
ビルド環境の構築に時間をかけたくなかったので、なるだけ設定を書かずに済むモジュールバンドラを探した。最低限、コンテンツの配信(ウェブサーバー)と、ファイルを変更したらビルド&リロードしてくれたらOK 。 いろいろ探したら、FuseBox がよさそうだった。TypeScript ファーストなのが決め手。
設定はこんなかんじ。
const { FuseBox, WebIndexPlugin } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", plugins: [ WebIndexPlugin({path: "."}) ] }); fuse.bundle('app') .instructions(`> sketch.ts`) .watch() .hmr({reload: true}); fuse.dev(); fuse.run();
node fuse
で起動できる。必要に応じて、npm scripts
に移動する。
スケッチ( src/sketch.ts
)
こんなかんじ。draw
に必要なコードを書き足していけばOK。
バンドルの過程で、setup
と draw
が関数スコープに入るので、明示的に window
オブジェクトのプロパティとして生やす必要がある。
/// <reference types="p5/global" /> import 'p5'; function setup() { createCanvas(720, 720); noCursor(); } function draw() { clear(); ellipse(50, 50, 80, 80); } window['setup'] = setup; window['draw'] = draw;