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

伊恩·沃特昆

我们有一个遗留的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 [email protected]/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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章