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

debugcn 发表于 Dev

伊恩·沃特昆

我们有一个遗留的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;
});

该捆绑包适用于骨干网一侧。接下来，我需要将其转换为可以导入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函数以无法静态提取依赖项的方式使用

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

未捕获的TypeError：name.split不是函数

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

达米安（Damian Dziaduch）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。