vue + composition-api + typescript + jest + eslintのリポジトリをセットアップした
リポジトリは下。
最近 Vue追ってなかったので、Vueの大きなアップデートを見ていた。
で、気になったのが下のようなツール周りの変化を知りたいなぁと思って サンプルリポジトリを構築した。 VueはちゃんとTypeScriptで構築した記憶がなかったので その辺のツール周りの調査がメインだった。
- React HooksのようなAPIの実装の提案はどうなったのかな
- Single File Componentを使った時に TypeScript周りの設定はどうするんだろう
- jestの設定は？（今回はsnapshot周りの設定はしていない。）
- eslintの設定は？
そういえば、React HooksのようなAPIの提案がある、というのも聞いていたけど 調べたところ、composition apiという形で実装されるようだ。 とりあえず、RFCを読んだ。 github.com
RFC読んだ感想としては、方向性としては正しそう、という気持ちになった。 互換性を保ちつつ、利用が出来るのも良い。
ちなみにRFC的にはFunction-based Component APIという名前なのね、となった。
詰まったところ
構築してみたところ、以下の点で詰まったのでメモしておく。
- vue-loaderの依存に vue-template-compilerが必要になっていた
- typescript-eslint-parserが
@typescript-eslint/parserにrenameされていた - tsファイルがコンパイル対象にないと、webpackする時に怒られる
- なんでや
- とりあえずファイル追加したら直った
- webpackでビルドは出来るが、vue-jestが tsconfigのパースでエラーを吐く
- jestのtestEnvironmentがjsdomじゃないと、@vue/test-utilsが怒る
- .vueファイルの型定義をコピペしてきたら動かなかったので弄ったけど、やっぱりダメだったので、元に戻したら動いた
- なんでや
- babelは使ってないけど、vue-jestが
babel-bridgeを要求してくる。- 追加すると治る
