React-router undefined after concatenation

2019-07-20 02:10发布

问题:

I've set up an app with react using react-router for routing and are having issues bundling it all.

I'm trying to build/bundle all the js files using gulp-requirejs. But somehow the shim is not included, or the react-router is just ignored. Whatever the problem is, I just end up with an error in the browser console saying Uncaught Error: app missing react-router

I'm including the most important code, feel free to ask if something doesn't make sense.

gulpfile.js

Almond.js is there to replace 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/'));
});

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

});

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

index.html

Mainly containing a script tag

After build you have to manually swap the src with app.min.js

<script data-main="/resources/js/init" src="/resources/bower_components/requirejs/require.js"></script>