Toilet EvolutionのフロントエンドをPolymer3対応する(1)
Thursday, April 25, 2019 03:42:00 PM
私が開発運用しているToilet Evolutionは、フロントエンドをPolymer(v1)で構築していました。 これは古いWebComponentsの仕組みを使っているので、常々アップデートしないとなーと思いながらも、長いこと重い腰があがりませんでした。
しかし以下のツイートを見て「よしやるぞ」という気持ちにスイッチが入り、移行を実施しました。
PSA: The latest Chrome Canary has removed support for web components v0, per the deprecation plan announced last year.
— Polymer Project (@polymer) 4 March 2019
If you have a site built with Polymer 1.x (or web components v0), check it against Canary now to make sure you’re properly serving the polyfills. https://t.co/IElNjGGZbI
実際Toilet Evolutionのサイトはもう最新に置き換わっております。 その様子はToilet EvolutionのGitHubリポジトリのコミットログを追うことでもわかったりしますが、かなり頑張ったので、その過程を連載でブログにまとめようと思いました。
この記事はその1回目です。
Polymer1プロジェクトをPolymer3へ移行するには
マイグレーションガイドは1から2、2から3に向けてあります。 1から3のガイドがあるわけではないので、両方を事前に読んでおくと良いです。
- Polymer1から2へのアップグレードガイド
<dom-module>でnameを使っていたらidに変更。stylesタグはtemplateタグの内側へ<content>タグは<slot>タグへ- CSSの
::contentセレクタは::slotted()セレクタへ - CSSの
/deep/や::shadowは使えなくなる - などなど…
- Polymer2から3へのアップグレードガイド
- modulizer使うと簡単にできるよ！
Polymer2は1の記法が使えるハイブリッドモードがあるのと、そもそも1から2で変更が必要な記述を使っていないので、実際はmodulizer一発でいけるんでは？と考えました。 なので、1から2の手順は気にせず、進むことにしました。
何はともあれアップデート
npmのライブラリもだいぶ古くなっていたので、まずは最新に更新しました。
Gulpを3から4にあげたので gulpfile.js もモリモリと変えていきます。
続いて、bowerに入っているパッケージも新しくしていきます。これは modulizerのガイドに書いてあるので、そのまま実施します。
続いてmodulizerを実行しますが、commitログではそこまでの手順で迷走しています。あまり気にしないでくださいw
modulizerで変換する
modulizer --out . を実行します。すると html で記述していたカスタムエレメントが js ファイルに変更されます。
ここまでのコミット
変換するとだいたい良い感じになっています。 でも変換だけでは動きません。ここで以下のような箇所が変換されないことがわかります。
- polymerの公式エレメントなど、変換されたbower_componentsを参照していて、npmに切り替わらない
- 変換後に手動で書き換えることに書いてある手順の実施
これらの手順は次回へ続きます。