Node.js で ExtendScript する話(パート２)

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

sayhello2 プロジェクト

ここで使用するツールは Node.js と Make でそれぞれバージョンは以下の通り:

$ node -v
v12.16.2

$ make -v
GNU Make 3.81

それでははじめましょう。 プロジェクトとディレクトリを作成し、Rollup.js をインストールする:

$ mkdir sayhello2
$ cd sayhello2
$ npm init -y
$ npm install rollup@2.56.3 --save-dev

ここまでのところで、一旦 package.json を確認します:

{
  "name": "sayhello2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.56.3"
  }
}

方針は以下のようにします。

• js_modules/say.js にモジュールコードを配置
• main.js でメインのコードを配置
• メインとモジュールをひとつにまとめたコードは main.jsx に生成

要するに方針は前回と同じなので、 main.js, js_moduels/say.js を sayhello プロジェクトからコピーしてきます。

この段階でディレクトリ構成を確認します:

.
├── js_modules
│   └── say.js
├── main.js
├── node_modules/
├── package-lock.json
└── package.json

それでは rollup を使って、モジュールをまとめた一つのコードを生成します。

$ ./node_modules/.bin/rollup main.js --file main.jsx

生成された main.jsx を見てみましょう。

var sayHello = function(name){
	return 'Hello, '+name+'!';
};
var sayKonnitiwa = function(name){
	return 'こんにちは '+name+'!';
};

var console = {};
console.log = function(message){
	$.writeln(message);
};

console.log( sayHello('Taro') );
console.log( sayKonnitiwa('Hanako') );

そのまま結合された素直なコードになっています。 ExtendScript として、作動させるには、@target InDesign を追加する必要があります。 それを含めて、Makefile にまとめて記述しましょう。

Makefile:

main.jsx: main.js
	./node_modules/.bin/rollup $< --file $@
	echo "//@target InDesign" >> $@
clean:
	$(RM) main.jsx

make して main.jsx を生成します。

あとは、.vscode/lanunch.json を加えて、VSCode + ExtendScript Debugger で実行するだけです。

うまくいきました。

まとめ

これで、ExtendScript 用の開発でもESMモジュールを使えるようになりました。 今度は ES6 Javascript 記述を使って ExtendScript 用のコードを書くに挑戦します。