node.js(npm)でしか使えないライブラリを単体で使えるようにする

GitHubとかでライブラリを探していると・・・

  • お、良さげなライブラリみっけ!
  • ん? npmでのインストール方法しかない
  • 単独(node.jsなし)で使いたいのに...

という感じで困る場面が多々あります。

普通にnode.jsなしで単体で使いたいんですよね。

そこで自分への忘備録として、
node.js(npm)依存のライブラリを単体で使う方法 を紹介!

node.jsなしで使うにはbrowserifyによる変換が必要

自分が使いたかったライブラリの場合・・・

次のような手順で使えと書かれていました。

▼ まずnpmからインストール

▼ そしてコードからimportする

node.jsを使ってる前提みたいです。

でも必ず node.js を使っている環境だとは限らないし、node.js(npm)に依存せずに単体で使いたい場合 もあるはず。というか自分の場合はそっちの方が多いです。

そこで便利なのが Broserify というツール

これはnode.js(npm)でしか動かないモジュールを一括でブラウザ単独で動かせるようにするためのツールです。コマンドラインからnpmモジュールを変換できます。

browserifyによるimport不要ライブラリへの変換方法

実際に変換まで試してみました。

その手順は次の通り

1.browserifyをnpmからインストール

まず大前提の大前提として・・・

必ずnode.jsをローカル環境にインストールしてください。

▼ node.jsでサーバー構築&起動する基本手順をまとめてみた

この記事でまとめた通り、やり方は難しくないです。

その過程で npm というツールがインストールします。

それが必須なので必ずnode.jsを入れといてください。

 

そしたらbrowserifyのインストールから

次のようなコマンドを打てばOK

broserifyのインストールはこれだけです。

2.node.js(npm)依存のライブラリをインストール

次にnpm経由で目的のライブラリをインストール

▼ 作業ワークスペースに移動

▼ 例えばTypography.jsをインストールする場合

ここまでで下準備が完了

3.main.jsとかを作ってbundle.jsに変換する

そしたらまずはnode.js依存のmain.jsを作成

▼ 例えば次みたいなコードを書く

当然ながらこれ単体では動かせません。仮にブラウザだけで動かそうとしても Uncaught ReferenceError: require is not defined  みたいなエラーが出るだけです。

そこでbrowserifyを使って変換します。

例えば次のようなコマンドを打てばOK

これでnode.jsでしか動かないmain.jsをブラウザ単体で動かせる bundle.js に変換可能。node.jsに依存しないようにbrowserifyがよしなにやってくれます。

あとは普通にスクリプトを読み込むだけ

実際に試してみたら正常に動きました!

browserifyによるライブラリ変換まとめ

もう1度流れをまとめておくと以下の通り

これでnode.jsなしで単体で動かすことができます。

今までこの方法を知らなかったので改めてまとめました。

以上、ではまた(^^)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください