Photoshop Extensionの開発6 トランスパイル編
今回はトランスパイルやら何やらの環境構築をしたいと思います。前述の通りCC2017ですらECMA2015もまともに動かないのでAdd on等で公開する事を前提に開発する私としてはトランスパイル自体必須の作業です。
ここの階層にmoduleなんかを設置していきます。というわけでまずはpackage.jsonを作成
トランスパイラですが私はいつもwebpackで環境構築しています。babelのついでにCSS向けのベンダープレフィックス対策やsassの使用環境構築なんかもしてゆきます。このあたりの環境構築に関しましてはicsさんの記事を参考にしました。
babelのインストール。
sass loader等のインストール。
それで通常のフロントエンドの場合はこれで必要なモジュールのインストールは以上になるのですがNode.jsも含めた環境構築の場合webpackがトランスパイル時に、Node.jsのネイティブモジュールに対してエラーを返してしまうのでNode.js用にさらにwebpack node modules externalsのインストールが必要になります。
webpack node modules externalsのインストール
webpack.config.jsの中身はこんな感じです。
さらにNode.jsの使用を有効にする場合manifest.xmlにコードを加えます。
ScriptPathのCEFCommandLineとParameterと下に四行ほど加えました。
ちなみにbracketsの古いプラグインで最初の環境を構築した場合大元のフォルダーネームにシングルクオート’がついている場合があります。エラーの元になるのでここまで動かなかった場合はフォルダーネームも確かめてみてください。