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

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';

在构建时给我警告，例如：

关键依赖：require函数的使用方式无法静态提取依赖

页面加载错误可能是某些症状：

未捕获类型错误：name.split 不是函数

将我的模块转换成我可以使用的东西的秘诀是什么？我愿意修改 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;
    }
);

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

How to import a Backbone/RequireJS module into a React/Webpack app

javascript

requirejs

backbone.js

reactjs

webpack