如何将 Backbone/RequireJS 模块导入 React/Webpack 应用程序

Question

We have a legacy Backbone application that we are moving over to React. An interim step we are attempting is loading a bundled Backbone module into a React page, until we have time to fully rewrite it. I am halfway there, I can bundle up the app and all its dependencies with r.js using a config like this:

({
    ...
    baseUrl: './',
    name: 'myapp',
    paths: {
      'myapp': './legacy/app'
    },    
    out: 'src/appbuilt.js'
    ...
})

The module is set up like this:

define(function(require) {
    var $ = require('jquery'),
        _ = require('underscore'),
        ...
        templates = $(require('text!templates/app.html')),
        app = {};

    app.View = .....
    app.Model = .....

    return app;
});

That bundle works on the Backbone side. Next I need to turn that into something I can import into React and render. I am trying things like this:

npx babel src/appbuilt.js --out-file src/appbuilt.es6.js --plugins=@babel/transform-modules-umd

Which works to give me a UMD module, but importing it like this:

import * as legacyapp from '../../appbuilt.es6';

Gives me warnings on the build like:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

And errors on page load that are probably symptoms of something:

Uncaught TypeError: name.split is not a function

What is the secret sauce to get my module converted into something I can use? I am open to modifying how the Backbone app does its imports, or making a wrapper of some kind that is more easily translatable.

Answer 1

I am not sure but I can guess that the format of your AMD modules is the problem here. Try converting them to regular AMD modules:

define(
    ['jquery', 'underscore', 'text!templates/app.html' /* add rest of dependencies here */],
    function ($, underscore, templates /** add parameters for rest of dependencies here */)
    {
        var app = {};

        // app.View = ...
        // app.Model = ...

        return app;
    }
);