lodashの使い方 〜browserifyを添えて〜(node.js超初心者向け)

npmってよく分からない・・・でも、この前上司が準備してくれた環境で、lodash使ったらすごい便利だったんだお!

あれぇ、var _ = require('lodash');したらブラウザでエラーが出るお・・・という人(著者)向けの記事です。

タイトルではlodashとしましたが、本記事はlodash自体には触れていません。

lodashの使い方はこちら

lodash(+ES6)超入門その1

nodeモジュールをブラウザで使うためには

通常、nodeのモジュールを利用する際はモジュールをrequireして使うわけですが、ブラウザはこれに対応しておらずエラーを吐きます。

困った、となるところブラウザでnodeのモジュールを利用できるように準備されたライブラリがあります。

それがbrowserifyなのです。

必要なモジュールをnpm installする

lodashbrowserifyをインストールします。

$ mkdir lo # テスト用のディレクトリ
$ cd lo
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

Press ^C at any time to quit.
name: (lo)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/yuka/dev/lo/package.json:

{
  "name": "lo",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

$ npm install --save lodash
$ npm install --save browserify

lodashを利用するjsファイルを作成

// main.js
var _ = require('lodash');
alert("test"); // lodash関係ないやん!

browserifyを実行

jsの準備ができたら、browserifyを実行します。

$node_modules/browserify/bin/cmd.js index.js -o bundle.js

※パスを通していないので、直接実行ファイルを指定して叩いています。

index.jsbrowserifyされたファイルがbundle.jsに書き出されます。

ブラウザで読み込む

これでindex.htmlを作成。
bundel.jsを読み込みます。

<html>
<head>
<script src="./bundle.js"></script>
</head>
<body>
Hello!lodash!
</body>
</html>

で、実行すると…

2016-07-14 22.55.29

エラーなく結果が出力されます。
あとは好きにlodashを利用したスクリプトを書くことができます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク