ブラウザ上もでrequire使いたい
現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClass
とか@HogeClass
とかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。
grunt-cli のインストール
npm install -g grunt-cli
package.jsonを作成
npm init
対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。
browserify grunt grunt-browserifyのインストール
npm install browserify grunt grunt-browserify --save-dev
--save-dev
をつけると、package.jsonにインストールした情報が記述が追加されます。
--save
との違いがわからぬ。完了するとnode_modulesというディレクトリにいろいろ入ってると思います。
Gruntfile.jsの作成
Gruntfile.jsに実行するタスクを記述します。
c.js
からhoge.js
を生成する記述です。
module.exports = function(grunt) { grunt.initConfig({ browserify: { sample: { files: { "hoge.js": ["c.js"] }, } } }); grunt.loadNpmTasks("grunt-browserify"); grunt.registerTask("default", ["browserify"]); };
サンプルソース
・a.js
module.exports = function() { console.log('a.js'); };
・b.js
module.exports = function() { console.log('b.js'); };
上記のようなa.js
、b.js
をc.js
からrequireする
・c.js
(function() { var a = require('./a.js'); var b = require('./b.js'); a(); b(); })();
タスクを実行
grunt
無事終えるとhoge.js
が生成されます。
hoge.jsを実行
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>browserify test</title> <script src="hoge.js"></script> </head> <body> </body> </html>
・出力
a.js b.js