如何將 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';

給我關於構建的警告，例如：

關鍵依賴：要求 function 以無法靜態提取依賴的方式使用

頁面加載錯誤可能是某些症狀：

未捕獲的類型錯誤：name.split 不是 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;
    }
);