install external library to electron (test)

psmuler commented 1 year ago

diffをとってhtmlで表示するために、diff2htmlというライブラリをインポートして使いたいです。しかし、今のところelectronで実装している時に外部ライブラリをインポートできたことがありません。試しになんでもいいので一般的なnode moduleを提案し、インストールしバージョン番号を表示してみましょう

psmuler commented 1 year ago

まず、diff2htmlというライブラリを使う前に、代わりにlodashという一般的なNodeモジュールをインストールしてバージョン番号を表示する方法を示します。その後、同様の方法でdiff2htmlをインポートする方法について説明します。

lodashをインストール: プロジェクトディレクトリで以下のコマンドを実行して、lodashをインストールします。

npm install lodash --save

lodashをインポートしてバージョン番号を表示: メインファイル（例：main.js）にlodashをインポートし、バージョン番号を表示するコードを追加します。

const _ = require('lodash');
console.log(`Lodash version: ${_.VERSION}`);

アプリを実行すると、コンソールにLodashのバージョン番号が表示されます。

diff2htmlをインストール: 同様に、diff2htmlをインストールするには以下のコマンドを実行します。

npm install diff2html --save

diff2htmlをインポート: メインファイル（例：main.js）にdiff2htmlをインポートします。

const { Diff2Html } = require('diff2html');

これで、diff2htmlライブラリをElectronアプリで使用できます。Diff2Html.getPrettyHtml()などのメソッドを使って、diffをHTML形式で表示できます。詳しくは、diff2htmlのドキュメントを参照してください。

例:

const { Diff2Html } = require('diff2html');
const fs = require('fs');

fs.readFile('example.diff', 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }

  const diffHtml = Diff2Html.getPrettyHtml(data, {
    inputFormat: 'diff',
    outputFormat: 'line-by-line',
    showFiles: true,
    matching: 'lines',
    synchronisedScroll: true,
  });

  // diffHtmlをHTMLファイルに書き込む、またはウェブページに表示する
});

psmuler commented 1 year ago

diff2hmtlについてもいきなり実装せず、まずはインストール、インポートができているか確認するためにバージョン番号を表示してみましょう

Escher-js / SkimmedMilk

install external library to electron (test) #26