スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

easy-modal-window v3


以前作ったモーダルウィンドウ用モジュールを大改修した。更新内容はFirefoxのWebAnimationsAPIで発生する不具合*1の修正や、各アニメーション処理の最適化が主で残りはビルド方法の変更くらいのものだが、現在は使う機会のなくなった一部プロパティを廃止して互換性が途切れたため、Semverの流儀に従ってメジャー番号を上げた。


Webpackを一段飛ばしでv3に更新した。configの書き方が大幅に変わっていてドキュメントを読みながらの作業になった。元はNode.js APIでビルドからDevServer立ち上げのテストをまとめて行っていたが、まるっと書き換えは流石にしんどかったので一旦CLIでそれぞれ行うように戻した。ローカルモジュールを多様する個人的には(v2の改善点だが)Loaderのパス問題が解決した点がとてもありがたい。何度も躓いて試行錯誤して、結局Loaderから扱うモジュールにはrequire.resolve()を使う羽目になったり、fallback等を駆使してビルド内モジュールの解決方法がスパゲティ化するのがWebpack一番の難点だった。モジュールと言えば素でES6 Modulesを読めるようになっていたが、どの道Babelを通さないと新しい部分で構文エラーが出て怒られるのであまり有難味はなかった。Tree Shakingを意識したモジュールが増えてくれば違うのかな。


これまではエディタから加工していたが、いくつかのCSSはPostCSSを通してVP付与・圧縮を行うようにした。いつの間にかすっかりCSS Modulesが普及したらしく、PostCSSのドキュメントにcss-loaderによるCSS Modulesと併用する際の注意書きがわかりやすく載っていて躓かずに済んだ。普段から情報収集をしない分野では、久しぶりに触れるたびに色々なものが新しく便利になっていて面白い。でもたかだかビルド環境の構築・更新なのに学習労力が掛かり過ぎではないかとも思う。おしまい。


*1

Element#animate()の第二引数に渡す設定オブジェクト.fillの値が"none"の場合、アニメーション中に変更されたStyle設定が終了時に元に戻される。ChromeやPolyfillではElement#animate()の返り値であるAnimationPlayerオブジェクトにfinishイベントが発火してからStyleが元に戻るが、FirefoxではStyle設定が元に戻った後にfinishイベントが発火する。

関連記事

コメントの投稿

非公開コメント

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。