Backbone React Requirejs 應用實戰(一)——RequireJS管理React依賴

試著用React替換Mustache打造了一個簡單的頁面，http://backbone-react.phodal.com/，當然Router用的還是Backbone的Router(react-router似乎還沒有做準備好做client-side的Router)。

Backbone RequireJS React 組合

組合的情況以及開發環境如下

• IDE: Webstorm(開源license，支援JSX)
• Backbone: Router + Model
• React: react-with-addons
• JSXTransformer
• react.backbone

其他

• loadsh替換underscore
• zepto替換jquery
• RequireJS jsx外掛

RequireJS管理React依賴

JSX Requirejs

github上有一個外掛是: jsx-requirejs-plugin

A RequireJS plugin for JavaScript files containing JSX. It's r.js friendly (i.e. all files containing JSX will be pre-compiled during the r.js build).

於是，安裝jsx-requirejs-plugin

bower install jsx-requirejs-plugin --save-dev

Requirejs JSX使用

1.新增paths

    react: 'vendor/react-with-addons.min',
    "JSXTransformer": 'vendor/JSXTransformer',
    jsx: 'vendor/jsx',
    'react.backbone': 'vendor/react.backbone',

2.使用jsx!

require(['jsx!app.react'], function (App) {

});

最後我的main.js如下所示:

'use strict';

require.config({
    paths: {
        jquery: 'vendor/jquery.min',

        react: 'vendor/react-with-addons.min',
        "JSXTransformer": 'vendor/JSXTransformer',
        jsx: 'vendor/jsx',
        'react.backbone': 'vendor/react.backbone',

        backbone: 'vendor/backbone',
        underscore: "vendor/lodash.min",

        text: 'vendor/text'
    },
    shim: {
        underscore: {
            exports: '_'
        }
    }
});

require([
    'backbone', 'jsx!app.react'
], function (Backbone, App) {
    App.initialize();
});

換句話說，我們將app.react.js視作app.react.jsx(這裡的.react是為了區分js和jsx)。

下面是我的router.react.js

define([
    'jsx!router.react'
], function (Router) {

    var initialize = function () {
        new Router();
    };

    return {
        initialize: initialize
    };
});

在我們的router裡匯入了不同的component，下面是一個精簡的router

'use strict';

define([
    'underscore',
    'backbone',
    'react',
    'jsx!component/IndexComponent.react',
],function(_, Backbone, React, IndexComponent){
    var AppRouter = Backbone.Router.extend({
        index: function(){
            React.render( <IndexComponent />, document.getElementById('main_content'));
        }
        initialize: function() {
            var self = this,
                routes = [
                    [ /^.*$/, 'index' ]
                ];

            _.each(routes, function(route) {
                self.route.apply(self, route);
            });
            Backbone.history.start();
        }
    });

    return AppRouter;
});

到此，我們可以愉快地用Requirejs管理我們的component。

其他

完整的Router

我的router如下所示:

define([
    'underscore',
    'backbone',
    'react',
    'jsx!component/IndexComponent.react',
    'jsx!component/AboutComponent.react',
    'jsx!component/ProductComponent.react',
    'jsx!component/ProjectComponent.react',
    'jsx!component/LibraryComponent.react',
    'model/UserModel',
    'data/libraries'
],function(_, Backbone, React, IndexComponent, AboutComponent, ProductComponent, ProjectComponent, LibraryComponent, UserModel, libraries){
    var AppRouter = Backbone.Router.extend({
        index: function(){
            React.render( <IndexComponent />, document.getElementById('main_content'));
        },
        about: function(){
            React.render( <AboutComponent />, document.getElementById('main_content'));
        },
        product: function(){
            React.render( <ProductComponent />, document.getElementById('main_content'));
        },
        library: function(){
            React.render( <LibraryComponent items={libraries} />, document.getElementById('main_content'));
        },
        project: function(){
            var user = new UserModel({name: 'phodal'});
            var UserView = React.createFactory(ProjectComponent);
            var userView = new UserView({model: user});
            React.render(userView, document.getElementById('main_content'));
        },
        initialize: function() {
            var self = this,
                routes = [
                    [ /^.*$/, 'index' ],
                    [ 'about', 'about' ],
                    [ 'product', 'product' ],
                    [ 'project', 'project' ],
                    [ 'library', 'library' ]
                ];

            _.each(routes, function(route) {
                self.route.apply(self, route);
            });
            Backbone.history.start();
        }
    });

    return AppRouter;
});

問題

1. JSXTransformer壓縮後的大小>100kb

下一篇: 《Backbone React Requirejs 應用實戰(二)——使用Backbone Model》

Github: https://github.com/phodal/backbone-react