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