@UsagiLabo (うさぎ研究所)posted at 2023-07-03

Node.js環境で作ったクラスを非Node.js環境で使うには

Q&A

Node.js

解決したいこと

Node.js環境で記述したクラスや関数を、Node.jsを全く使用しない環境（例えばhtmlファイルに記述したscriptタグ内など）で実行することは可能ですか、可能であるならばそれを実現するための手順を知りたいです。

経緯

普段JavaScriptの開発は、Node.js環境下で以下のような手順で作業しています。

npmでパッケージをインストールする
パッケージをimportして自分なりのモジュールを作る（作ったモジュールをexport）
エントリーポイントとなるindex.jsで作成したモジュールをimportしてウェブアプリを作る
webpackでコンパイル（バンドル？）する
生成したファイルを公開する

モジュールで作ったクラス（や関数）を試用したい、と知人に依頼を受けました。ただし知人はNode.jsを使わない環境で開発をしているため、該当するファイルをそのまま渡しても使用できません。

自分で試したこと

例えば普段は以下のようにモジュールを記述しています。

import hoge from "hoge";
export default class Fuga {    //このクラスを使いたい
    piyo ( value ) {
        return hoge( value );
    }
};

調べたところbrowserifyの挙動が近そうと思い試したのですが、browserifyは記述したJavaScriptの実行は可能であるものの、モジュール等で定義したクラスや関数に対して、外部から使用可能になるものではなさそうなことがわかりました。

import hoge from "hoge";
class Fuga {    //このクラスを使いたい
    piyo ( value ) {
        return hoge( value );
    }
};
const obj = new Fuga();
console.log( obj.piyo('test') );

上記のようにbrowserifyする前に処理を記述すれば使えますが、結局node.jsの環境が必要になってしまいます。

可能でしょうか

結論としてNode.js環境で作ったクラスや関数を非Node.js環境で使えるようにすることは可能でしょうか。
可能でしたら、それを実現するための手順（ヒントでも結構です）をご教示ください。

よろしくお願いします。

1Answer

@Verclene posted at 2023-07-03

ESModuleをHTMLで使うだけならtype属性をmoduleにしてやればよいです.

Node.jsコアライブラリへ依存する場合は,これだけでは対応できないことに留意してください.

0Like

Comments

@UsagiLabo
Questioner
作成したモジュール（渡したいクラスを含む）はnpmでインストールしたパッケージをimportして使っています。そのパッケージが更に別のパッケージをrequireで読み込んでいたりするので、そう単純にはいかない気がするのですがいかがでしょうか。Node.jsコアライブラリは不要（多分）なので大丈夫と思います。
一つのクラスにバンドルしてくれるようなツールがないものか、と漠然と考えています。
@Verclene
webpackでモジュール別の出力は可能ですので,出力したいモジュールに対して設定してみてください.

ウェブアプリ用とライブラリ用のコードを別々に出力したり,設定次第でdefault exportを従来のグローバルスコープにしたりできます.

@UsagiLabo

Questioner

丁寧に教えてくださり、どうもありがとうございました。
色々と試行錯誤したのですが、webpackのoutputでlibrary属性を指定することで実現できることがわかりました。同じように悩まれる方がいらっしゃるかもしれないのでテストした結果を共有します。

webpack.config.js

const path		= require( 'path' );
module.exports = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: path.resolve( __dirname, 'dist' ),
    filename: 'myfunc.js',
	library: 'myfunc',
  },
  mode: 'development',
};

index.js

import { sprintf } from "sprintf-js";
export function hello( name ) {
	console.log( sprintf('Hello %s !', name) );
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script src="./dist/myfunc.js"></script>
	<script>
		myfunc.hello( 'daddy' );
	</script>
</body>
</html>

Hello daddy !

おかげさまでほんの少しだけ知識が増えました。
ありがとうございました。

Are you sure you want to delete the question?