Reactの環境構築をAdobeCEP上で行う
基本的に一枚のパネル上でインターフェイスを構築する必要があるExtensionでは多機能なパネルを開発しようと思うと表示の切り替え機能が必要になったりそれに伴いhtmlのコード量が莫大になったりします。結局ある程度の規模のパネルを開発する場合は何らかしらのフレームワークの導入も視野に入ってくる、という事で今回はReactの環境構築をAdobeCEP上で行う場合につまづいた点を載せたいと思います。まずは最低限必要なnpmパッケージから。
React、webpack、babelの一連のパッケージになります。
Node.jsのためにexternalsをインストール
async,awaitを使用するためのbabelのプラグイン。React上でこれらを使用するにはたとえ最新のecmaに対応している環境でも別途プラグインのインストールが必要らしいです。
後程説明しますがReactのclass 構文でメソッドに対してアローファンクションを使用するためのプラグイン。
npmパッケージをインストールしたらwebpackの設定へ
ポイントはtargetでnodeの環境を明示する事でしょうか。デフォルトだとweb(ブラウザーベースの環境)が設定されるのでここを設定し忘れるとNode関連のモジュールが上手く動きません。ただしAdobeCEP自体Node webkitベースで作られているらしいのでnode-webkitの設定の方が合っているかもしれないですが一応現在問題無いのでnodeで設定していますが正確かどうか自信がありません、、、
またプラグインで一部、機能を拡張します。
babel plugin-transform-runtime
async awaitをclassメソッドで使用できるようにします。これが無いとreactでasync,awaitがうまく動きません。vanilla scriptだと通常のbabelとpolyfillだけで動くので当初想像もつかなかった。
babel plugin-proposal-class-properties
アローファンクションをclassメソッドでも使用できるようにします。これが無いとstateを更新するメソッドを一々bindで束縛しないといけません。
次回はreact-dndについて書きたいな。