プログラミング

プログラミング

【これで解決!】Nodeとbrowserの両方に対応したJavaScriptのパッケージの書き方

2,149 views

読了時間 : 約2分2秒

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”に追加します。


 
 
 
 

そしてファンクションを2つのファイルに分けます。”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」を翻訳・再編集したものです。

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ