Backbone.jsはBrowserifyと一緒に使うことができます。
Backbone & jQuery meet Browserify: easy. | makerlogの手順からbeefyを抜いて試してみます。
作業ディレクトリ作成
mkdir browserify_test
cd browserify_test
package.json作成
npm init -y
npm install --save-dev jquery backbone browserify
browserify実行用のnpm scriptを追加します。
"scripts": {
"start": "browserify index.js -o bundle.js"
}
ソースコード作成
main処理をindex.jsに書きます。
index.js
const AppView = require('./app-view')
new AppView
index.jsで使うAppViewをapp-view.jsに書きます。
app-view.js
const Backbone = require('backbone'),
$ = require('jquery')
Backbone.$ = $
module.exports = Backbone.View.extend({
el: '.container',
events: {
'click button': () => alert('hello')
}
})
Backbone.$ = $がコツです。
AppViewの動作はBackbone.js で Hello World （Backbone.Viewのサンプル）と同じです。
browserifyを実行
npm start
browserifyで作成したbundle.jsを読み込むindex.htmlを書きます。
index.html
<body>
<div class="container">
<button>say hello</button>
<span class="message"></span>
</div>
<script src="bundle.js">
</script>
</body>