GitHubとかでライブラリを探していると・・・
- お、良さげなライブラリみっけ！
- ん？ npmでのインストール方法しかない
- 単独(node.jsなし)で使いたいのに...
という感じで困る場面が多々あります。
普通にnode.jsなしで単体で使いたいんですよね。
そこで自分への忘備録として、
node.js(npm)依存のライブラリを単体で使う方法 を紹介！
このページの目次
node.jsなしで使うにはbrowserifyによる変換が必要
自分が使いたかったライブラリの場合・・・
次のような手順で使えと書かれていました。
▼ まずnpmからインストール
|
1 |
npm install hogehoge |
▼ そしてコードからimportする
|
1 2 3 4 5 6 7 |
import Hogehoge from 'hogehoge' const hogehoge = new Hogehoge({ hoge: 'Hoge', fuga: 'Fuga', piyo: 'Piyo' }); |
node.jsを使ってる前提みたいです。
でも必ず node.js を使っている環境だとは限らないし、node.js(npm)に依存せずに単体で使いたい場合 もあるはず。というか自分の場合はそっちの方が多いです。
そこで便利なのが Broserify というツール
これはnode.js(npm)でしか動かないモジュールを一括でブラウザ単独で動かせるようにするためのツールです。コマンドラインからnpmモジュールを変換できます。
browserifyによるimport不要ライブラリへの変換方法
実際に変換まで試してみました。
その手順は次の通り
１．browserifyをnpmからインストール
まず大前提の大前提として・・・
必ずnode.jsをローカル環境にインストールしてください。
▼ node.jsでサーバー構築＆起動する基本手順をまとめてみた
この記事でまとめた通り、やり方は難しくないです。
その過程で npm というツールがインストールします。
それが必須なので必ずnode.jsを入れといてください。
そしたらbrowserifyのインストールから
次のようなコマンドを打てばOK
|
1 |
npm install -g browserify |
broserifyのインストールはこれだけです。
２．node.js(npm)依存のライブラリをインストール
次にnpm経由で目的のライブラリをインストール
▼ 作業ワークスペースに移動
|
1 |
cd /path/to/workspace |
▼ 例えばTypography.jsをインストールする場合
|
1 |
npm install typography |
ここまでで下準備が完了
３．main.jsとかを作ってbundle.jsに変換する
そしたらまずはnode.js依存のmain.jsを作成
▼ 例えば次みたいなコードを書く
|
1 2 3 4 5 6 7 8 9 |
const typography = require('typography')({ baseFontSize: '18px', baseLineHeight: 1.45, bodyFontFamily: ['Georgia', 'serif'], }) typography.toString() typography.injectStyles() |
当然ながらこれ単体では動かせません。仮にブラウザだけで動かそうとしても Uncaught ReferenceError: require is not defined みたいなエラーが出るだけです。
そこでbrowserifyを使って変換します。
例えば次のようなコマンドを打てばOK
|
1 |
browserify main.js -o bundle.js |
これでnode.jsでしか動かないmain.jsをブラウザ単体で動かせる bundle.js に変換可能。node.jsに依存しないようにbrowserifyがよしなにやってくれます。
あとは普通にスクリプトを読み込むだけ
|
1 2 |
<!-- 変換済JSを読み込み --> <script src="./bundle.js"></script> |
実際に試してみたら正常に動きました！
browserifyによるライブラリ変換まとめ
もう１度流れをまとめておくと以下の通り
これでnode.jsなしで単体で動かすことができます。
今までこの方法を知らなかったので改めてまとめました。
以上、ではまた(^^)/~~~
