连接后的react-router未定义

IT技术 javascript requirejs gulp reactjs
2022-08-04 01:25:40

我已经设置了一个使用react -router进行路由的应用程序,并且在捆绑所有应用程序时遇到了问题。

我正在尝试使用gulp-requirejs构建/捆绑所有 js 文件。但不知何故,不包括垫片,或者只是忽略了react-router。无论问题是什么,我最终都会在浏览器控制台中出现错误提示Uncaught Error: app missing react-router

我包含了最重要的代码,请随时询问是否有任何意义。

gulpfile.js

Almond.js可以代替 requirejs

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rjs = require('gulp-requirejs'),

gulp.task('requirejsBuild', function() {
    rjs({
        baseUrl: './app/resources/js/',
        out: 'app.min.js',
        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']
            }
        },

        deps: ['jquery', 'react-router'],
        include: ['init'],
        name: '../bower_components/almond/almond'
    })
    .pipe(uglify()).pipe(gulp.dest('./app/resources/js/'));
});

初始化.js

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();

});

应用程序.js

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;
    }
);

索引.html

主要包含一个脚本标签

构建后,您必须手动将 src 与 app.min.js 交换

<script data-main="/resources/js/init" src="/resources/bower_components/requirejs/require.js"></script>
0个回答
没有发现任何回复~