如何将BackboneRequireJS模块导入ReactWebpack应用中？

Question

我们有一个传统的Backbone应用程序，我们正在将其转移到React上。我们正在尝试的一个临时步骤是将一个捆绑的Backbone模块加载到React页面中，直到我们有时间完全重写它。我已经完成了一半，我可以用r.js使用这样的配置来捆绑应用和所有的依赖关系。

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

模块的设置是这样的

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

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

    return app;
});

捆绑在Backbone那边就可以用了。接下来我需要把它变成可以导入React并渲染的东西。我正在尝试这样的事情。

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

这可以给我一个UMD模块，但像这样导入，

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

在构建过程中会给我警告，比如：

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

而在页面加载时出错，可能是什么症状。

Uncaught TypeError: name.split is not a function.

有什么秘诀可以让我的模块转化为我可以使用的东西？我愿意修改Backbone应用程序的导入方式，或者制作某种更容易翻译的包装器。

Answer 1

我不确定，但我可以猜测你的AMD模块的格式是这里的问题。试着将它们转换为普通的AMD模块。

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