Underscore.js を以前は Node.js + Babel + Webpack を使って 一つの jsx ファイルにまとめて使っていた。 しかし、時が経ち Node.js 自体もバージョンアップされモジュールもバージョンアップ・・・ なんやかんやで今や最新の環境ではうまく作動しないことがわかった。

InDesign も UXP が使えるようになったので、 ExtendScript で ES6 記述ができるとか今さら・・・とも思うのですが、ビジネスにおいては まだ当分の間 ExtendScript が使われていく気がするので、 最新の Node.js 環境で ExtendScript 用に Underscore.js などのモジュールの利用、 そして ES6 スタイルでの const, let, テンプレートリテラル, アロー関数などの構文が記述できる状態にしたい。

ごく簡単なコードでしか検証していませんが、 やり方がわかったので、備忘録としてシェアします。

UXP Script ではモダンなJavaScript(ES6) に対応したので、既存のJavaScriptライブラリを利用できるようになりました。

今回は SheetJS を使って MSエクセルデータを扱う方法を試しました。

完成したスクリプトの配布時にそれを一つにまとめたいので Rollup.js を使います。 この手のバンドルツールといえば webpack が定番ですが、 今回試した範囲では webpack と UXP InDesign Script の組み合わせはうまくいかなったので webpack の代わりに Rollup.js を使います。

2023-02-11 更新
Rollup.js の代わりに deno を使って bundle できることがわかりました。詳しくはこちらのエントリーをご覧ください。

完成したスクリプトの作動デモはこちらを https://youtu.be/SnpH6Ui7nOs ご覧ください。

Node.js で ExtendScript する話(パート３) ES6 Javascript 記述を使いたい で node.js を使ってモジュールを解決しつつ、アロー関数や const let などのES6 Javascript 記述を使って書けるようになった。 そこで、次に Underscore.js を利用した ExtendScript をコーディングすることを考えます。

実のところ単に Underscore.js を使うだけならば、ExtendScript 標準の @include ディレクティブを使うことで普通に利用できます。 しかしこの方法では、 (1)Underscore.js のファイルを常に本体のファイルとともに配布する必要があり面倒、 (2)Underscore.js を使う側のアプリケーションコードで、ES3レベルの Javascript しか記述できない、 という２つの問題があります。 Node.js + Rollup.js + Babel を使う方式でこの問題を解決しましょう。

実のところ、 パート１、 パート２は、この ES6 の Javascript 記述で ExtendScript 用のコードを書くための前準備であった。

ここまでで、モジュールを使ってコードを書けるようになり、Rollup.js により、それらのコードを一つのファイルにまとめるところまでできた。 あとは、このコードをいわゆるトランスパイラと呼ばれるコード変換ツールにより、ExtendScript として機能する Javascript に変換します。 このトランスパイラは定番の babel を使います。

パート１では、webpack を使って、モジュールを一つのファイルにまとめていました。 しかし、この方法では、webpack により、ExtendScript で実行できないjavascript記述が追加されてしまう不都合がありました。 そこで モジュールをひとつにまとめる機能を webpack の代わりに Rollup.js を使って解決することにします。