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

k4aesqcs  于 2022-11-10  发布在  React
关注(0)|答案(1)|浏览(146)

我们有一个遗留的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';
在生成时发出警告,例如:

  • 关键依赖项:require函数的使用方式无法静态提取依赖项 *

页面加载错误可能是以下情况的症状:

  • 未捕获的类型错误:名称.split不是函数 *

我的模块转换成我可以使用的东西的酱料是什么?我愿意修改Backbone应用程序的导入方式,或者制作某种更容易翻译的 Package 器。

7fhtutme

7fhtutme1#

我不确定,但我可以猜测,您的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;
    }
);

相关问题