依存関係のバンドル

モジュールのバンドルとは:

モジュールのグループを正しい依存関係、正しい順序で単一のファイル（またはファイルのグループ）につなぎ合わせるプロセス。

JavaScriptプロジェクト、特にウェブ開発に焦点を当てたプロジェクト用に設計されたモジュールバンドラーの健全なエコシステムが存在しています。Nova機能拡張はウェブブラウザを対象としていませんが、JavaScript機能拡張ランタイムを使用し、同じバンドラーを使用して外部モジュールをプロジェクトに取り込むことができます。

本ガイドでは Rollup.jsを使用しますが、Webpack や Browserifyなどの他のバンドラーに精通している場合でも原則は同じです。

devDependenciesのインストール

トップレベルのパッケージでは rollupjs パッケージといくつかのRollupプラグインを使用します:

NPMを利用してインストールしていきましょう:

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs

  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.1",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "rollup": "^1.30.1"
  },
  "dependencies": {
		"chroma-js": "^2.1.0"
  },

Rollup.jsを構成する

次に、Rollupにエントリポイントスクリプトの参照先と、ビルド時に実行する内容を指示する必要があります。

プロジェクトのルートに、新規ファイルrollup.config.jsを作成します:

(nova-novachrome)
 ├── ...
 ├── package.json
 ├── package.lock.json
 ├── README.md
 └── rollup.config.js

続いて以下をペーストします:

const commonjs = require( "@rollup/plugin-commonjs" );
const resolve = require( "@rollup/plugin-node-resolve" );

module.exports =
{
	input: "src/Scripts/main.js",

	plugins: [
		commonjs(),
		resolve(),
	],

	output: {
		file: "Novachrome.novaextension/Scripts/main.dist.js",
		format: "cjs"
	},
}

行っていること

私たちの構成はRollupに以下を伝えています:

まず、ソーススクリプトファイル src/Scripts/main.js を参照します
検出されたCommonJS-style require ステートメントをRollupが理解可能な形式に変換します
node_modulesを使用して依存関係を解決します
CommonJS形式を使用して、拡張バンドル内の出力ファイルとしてmain.dist.jsを作成します

簡単に言うと、ソースファイルとその外部依存関係をNovaがサポートする形式の拡張バンドルの内部にある単一のファイルにコンパイルしています。

では試してみましょう！新規ローカルターミナルタブを開き、以下のコマンドを実行します:

$ npx rollup -c

src/scripts/main.js → Extension.novaextension/scripts/main.dist.js...
created Novachrome.novaextension/scripts/main.dist.js in 334ms

必要に応じ、機能拡張を再度アクティベート（機能拡張 > プロジェクトを機能拡張としてアクティベート）し、機能拡張コンソールを開きます:

#663399

動作が確認できました！インポートしたchroma-jsをmain.jsソースファイルに正常にバンドルされ:

const chroma = require( "chroma-js" );
console.log( chroma("#36036a").brighten().hex() );

それを拡張バンドルにコンパイルしました。

ワークフローの開発

ソースファイルで作業し、機能拡張バンドルにコンパイルして、その際に機能拡張がどの様に自動的に再ロードされるかを確認しておくと便利です。

しかしながらソースファイルを編集し、ターミナルに切り替えて変更を確認する度にnpx rollup -cを実行するのは面倒です。

開発をスムーズにするためのヒントをいくつか紹介します。

NPMスクリプト

トップレベルフォルダはNPMプロジェクトのため、Nova以外の機能拡張の開発に使用するのと同じツールをすべて使用できます。

ディスク上の変更を監視するパッケージであるonchangeをインストールします:

npm install --save-dev onchange

次にpackage.jsonを開き、新規スクリプトbuildとwatchを追加します:

"scripts": {
  "build": "npx rollup -c",
  "watch": "onchange -i \"src/**/*.js\" -- npm run build"
},

ローカルターミナルに切り替え、watchスクリプトを実行します:

$ npm run watch

> nova-novachrome@0.1.0 watch /Users/ashur/Developer/nova-novachrome
> onchange "src/**/*.js" -- npm run build

src/Scripts/main.jsに変更を加えます:

chroma.temperature(3500);

そして機能拡張コンソールを覗いてみましょう:

#ffc38a

ウォッチャは変更を確認し、機能拡張ソースを再構築してNovaにリロードさせます。

続きは…: パート4: Novaでタスクを実行する
ここまでは…: パート2: プロジェクトの構造について