Nodeとrowserに対応｜JavaScriptのパッケージはこれで解決！！

Nodeとbrowserの両方に対応したJavaScriptのパッケージを書くことに関して、多くの混乱が発生しています。

熟練したJavaScriptの開発者でさえ細部を間違える可能性があります。そこで簡単なチュートリアルを作成しました。

 

 

 

JSパッケージを構築しましょう

まず、“base64-encode-string”という小さいJavaScriptパッケージを書きます。

Browser用は簡単です。単にビルドイン関数である”btoa”ファンクションを使います。

 

 

Nodeには“btoa”ファンクションがありません。そこで、“Buffer”を作り、“buffer.toString()”で呼び出します。

 

どちらも、正しいbase64-encoded バージョンのStringを規定する必要があります。

 

 

次に、browserなのかNodeなのかを決めるコードを書きます。

そしてファイルを、“index.js”、タイプ“npm publish”とします。この実装でも動きますが、パフォーマンス問題が出てきます。“index.js”ファイルがNodeのビルドイン“プロセス”と“Buffer”モジュールを含んでいることから、BrowserifyとWebpackは自動的にポリフィルを含むためです。
 

 

 

“browser”フィールド

この問題の解決策を調べると、“node-browser-resolve”に行きつくと思います。これは“package.json”中の“browser”フィールドの仕様で、browser用に構築している時に除かれるべきモジュールを定義してくれます。

このテクニックを用い、以下を”package.jason”に追加します。

そしてファンクションを２つのファイルに分けます。”index.js”と”browser.js”です。

こうすることでバイト数が大幅に減少します。

パッケージをnpmに公開したときに、Node中の“require(‘base64-encode-string’)”がNodeバージョンを呼び、そしてBrowserify又は Webpackを利用している場合はbrowserバージョンとなります。成功です！

 

 

 

 

高度なテクニック

より大きなプロジェクトの場合、以下のように”package.json”とコードベースがの組合せがおかしくなってしまうことがあります。

そのため、browserに特化したモジュールを作りたいときは毎回、二つのファイルを作成する必要があります。
そして”browser”フィールドに一行追加し、二つのファイルを結びつけます。

本記事にて使用したプロジェクトはnpmにて公開されています。ソースコードはGitHub上で入手可能です。

 

 

 

 

 

 

 

※本稿は「How to write a JavaScript package for both Node and the browser」を翻訳・再編集したものです。