ExtendScript で Underscore.js を使う(その２) webpack 編

ExtendScript で Underscore.js を使う(その１) rollup 編 で rollup + babel + Underscore.js を試したのだが、 rollup を webpack に差し替えての Underscore.js を試したのでその備忘録。

myunderscore プロジェクト

例によって、ここで使用するツールのバージョンを確認しておきます。

$ node -v
v14.17.6

$ make -v
GNU Make 3.81

プロジェクトディレクトリを作成:

$ mkdir myunderscore
$ cd myunderscore

package.json を用意:

{
  "name": "myunderscore",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.4",
    "babel-loader": "^8.2.2",
    "webpack": "^5.52.0",
    "webpack-cli": "^4.8.0",
    "underscore": "^1.13.1"
  }
}

ESM スタイルのモジュールを使うには "type": "module" を指定しておくこと。

package.json に記述した依存ライブラリをインストールします。

$ npm install

webpack と babel の設定を入れます。

これらの設定ファイルは 前回 と同じ内容ですが、 webpack.config.js については、プロジェクトの type を module にした(ESMタイプ)関係で webpack.config.cjs という cjs 拡張子のファイル名に変更する必要があるようです。

webpack.config.cjs:

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'main.jsx'
    },
    target: ['web', 'es5'],
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: path.resolve(__dirname, 'node_modules'),
            use: 'babel-loader'
          }
        ]
    }
};

例によって main.js を元にトランスパイルとバンドルした main.jsx を生成する流れです.

babel の設定ファイルは 前回 と同じです。 babel.config.json:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ],
  "plugins": []
}

ここまでのところで、一旦 ファイルとディレクトリ構成の確認:

.
├── node_modules/
├── babel.config.json
├── package-lock.json
├── package.json
└── webpack.config.cjs

それでは Underscore.js を使ったコードを書きます。

main.js:

import _ from './node_modules/underscore/underscore-node.mjs';
import {sayHello,sayKonnitiwa} from './js_modules/say.js';
import {console} from './js_modules/console.js';

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

const list = ['Taro', 'Hanako'];
_.each( list, (name)=>{
	console.log( sayHello(name) );
});

Underscore.js は underscore-node.mjs をインポートに使います。 ./js_modules/say.js はいつもの sayHello, sayKonnitiwa するモジュール、 そして、console.log も今回モジュールにしました。

js_modules/console.js:

const console = {};
console.log = (message) =>{
	$.writeln(message);
};

export { console };

ここまで準備できたらあとは Makefile で変換手順を書くだけです。

Makefile:

main.jsx : main.js js_modules/console.js js_modules/say.js webpack.config.cjs babel.config.json
	npx webpack --config webpack.config.cjs
	echo "" >> $@
	echo "//@target InDesign" >> $@

clean:
	$(RM) main.jsx

この段階でのファイルおよびディレクトリ構造の確認:

.
├── Makefile
├── babel.config.json
├── js_modules
│   ├── console.js
│   └── say.js
├── main.js
├── node_modules/
├── package-lock.json
├── package.json
└── webpack.config.cjs

最後に 例によって .vscode/launch.json を追加して、 VSCode + ExtendScript Debugger で実行してみましょう。

うまくいきました。

まとめ

これで Underscore.js を利用した ExtendScript コードを webpack + babel を使うことで ES6 の Javascript 記述 を使って書くことができるようになりました。

追伸

この内容を整理しなおした電子書籍 Node.js による InDesign ExtendScript モダン開発入門を出しました。