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-requirejsplugin --savedev

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'],0)"> function (App){});
 
 最后我的main.js如下所示:
 
'use strict';.config({ paths jquery'vendor/jquery.min' backbone'vendor/backbone' underscore"vendor/lodash.min" text'vendor/text'},0)"> shim exports'_'}});(['backbone''jsx!app.react'Backbone initialize(); 换句话说，我们将app.react.js视作app.react.jsx(这里的.react是为了区分js和jsx)。
 
 下面是我的router.react.js
 
define'jsx!router.react'Routervar initialize =()new};return initialize 在我们的router里导入了不同的component，下面是一个精简的router
 
 define'underscore''react''jsx!component/IndexComponent.react'function(_ReactIndexComponent){AppRouter.extend index(){render<IndexComponent/>,0)"> documentgetElementById('main_content'));selfthis routes [/^.*$/'index']]; _eachroutesrouteselfapply( route);historystartAppRouter 到此，我们可以愉快地用Requirejs管理我们的component。
 
 其他
 
 完整的Router
 
 我的router如下所示:
 
'jsx!component/AboutComponent.react''jsx!component/ProductComponent.react''jsx!component/ProjectComponent.react''jsx!component/LibraryComponent.react''model/UserModel''data/libraries'AboutComponentProductComponentProjectComponentLibraryComponentUserModel libraries aboutAboutComponent productProductComponent libraryLibraryComponent items={libraries project user name'phodal'UserViewcreateFactory userView UserViewmodel useruserView'about''about''product''product''project''project''library''library'});