Javascript 串联后反应路由器未定义
我已使用using for routing设置了一个应用程序,但捆绑所有应用程序时遇到问题。 我正在尝试使用构建/绑定所有js文件。但不知何故,垫片没有包括在内,或者只是忽略了react路由器。不管问题是什么,我只是在浏览器控制台中出现了一个错误,上面写着Javascript 串联后反应路由器未定义,javascript,requirejs,gulp,reactjs,Javascript,Requirejs,Gulp,Reactjs,我已使用using for routing设置了一个应用程序,但捆绑所有应用程序时遇到问题。 我正在尝试使用构建/绑定所有js文件。但不知何故,垫片没有包括在内,或者只是忽略了react路由器。不管问题是什么,我只是在浏览器控制台中出现了一个错误,上面写着uncaughterror:app missing react router 我包含了最重要的代码,请随意询问是否有不合理的地方 gulpfile.js 是否有替换requirejs的方法 init.js app.js index.html 主
uncaughterror:app missing react router
我包含了最重要的代码,请随意询问是否有不合理的地方
gulpfile.js
是否有替换requirejs的方法
init.js
app.js
index.html
主要包含一个脚本标记
构建后,您必须手动将src与app.min.js交换
<script data-main="/resources/js/init" src="/resources/bower_components/requirejs/require.js"></script>
请在问题中添加加载RequireJS并启动应用程序的HTML。(不是整个HTML文件。只有脚本
标记和您使用的任何内联JavaScript。)@Louis,我按照您的建议做了。好的,谢谢。不过我有点困惑。您可以通过加载init.js
文件(`data main=“/resources/js/init”)来加载应用程序。您的
init.js`文件将您的主模块称为app
,但在构建之后,它的名称是app.min.js
。然而,init.js
中没有任何内容告诉RequireJS,app
是app.min
@Louis,当js被构建时,它实际上应该替换index.html中的脚本,它必须通过此设置手动完成<代码>
require.config({
baseUrl: '/resources/js/',
deps: ['jquery'],
paths: {
'react': '../bower_components/react/react-with-addons',
'react-router': '../bower_components/react-router/dist/react-router',
'react-shim': 'react-shim',
'jquery': '../bower_components/jquery/dist/jquery'
},
shim: {
'react-shim': {
exports: 'React'
},
'react-router': {
deps: ['react-shim']
}
}
});
require(['react', 'app'], function(React, App) {
var app = new App();
app.init();
});
define([
'react',
'react-router',
], function(
React,
Router,
){
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;
/**
* Wrapper for it all
*
* @type {*|Function}
*/
var Wrapper = React.createClass({displayName: "Wrapper",
mixins: [Router.State],
render: function() {
return (
React.createElement(RouteHandler, null)
);
}
});
var routes = (
React.createElement(Route, {handler: Wrapper, path: "/"}, null)
);
var App = function(){};
App.prototype.init = function () {
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(React.createElement(Handler, null), document.getElementById('content'));
});
};
return App;
}
);
<script data-main="/resources/js/init" src="/resources/bower_components/requirejs/require.js"></script>