Как импортировать модуль Backbone / Require JS в приложение React / Webpack - PullRequest
Новая
       109

Как импортировать модуль Backbone / Require JS в приложение React / Webpack

1 голос
/ 29 мая 2020

У нас есть устаревшее приложение 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 используется таким образом, что зависимости не могут быть извлечены статически

И ошибки при загрузке страницы это, вероятно, симптомы чего-то:

Uncaught TypeError: name.split не является функцией

Каков секретный соус для преобразования моего модуля во что-то, что я могу использовать ? Я открыт для изменения того, как приложение Backbone выполняет импорт, или создания какой-либо оболочки, более легко переводимой.

1 Ответ

1 голос
/ 02 июня 2020

Я не уверен, но могу предположить, что проблема в формате ваших модулей 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;
    }
);
...