如何将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 条评论
登录 后参与评论

相关文章

将 TypeScript 模块从本地模块导入 React 应用程序

使用webpack导入requirejs amd模块

如何使用Typescript,React和Webpack导入SCSS或CSS模块

将Node.js中的模块导入React应用

如何将CSS文件导入webpack?

将 css 模块导入 Webpack

如何将大量视频文件导入React应用

如何将RequireJS模块集成到AngularJS应用程序中?

如何从webpack导入多个模块?

如何导入 webpack 子模块?

Babel、Webpack、ES6、React:导入模块然后将导入的模块作为道具传递给孩子

将 typescript 模块导入 React 应用程序中的 JS 模块

如何使用Webpack构建React应用并导入资产文件夹?

如何将angular.js模块导入Angular应用程序?

如何从没有npm / webpack的HTML文件中导入React模块

webpack如何处理导入同一模块的多个文件React

Typescript 模块 + Webpack + RequireJS

使用Webpack将React应用投入生产

在React / Webpack应用程序中将节点模块导入到Web Worker

如何将Bower组件导入npm webpack项目?

如何将文件导入使用 create react app 作为原始文本的 react 应用程序?

如何在React应用程序中导入highcharts子模块

如何将Twitter Bootstrap集成到Backbone应用程序

如何将 react-modal 导入现有应用程序?

如何将本地样式应用于导入的 React 组件

RequireJS:动态将插件应用于模块ID

Webpack:如何将原始HTML加载为React JSX?

ModuleNotFoundError:没有名为Foo的模块-如何将模型导入Django应用程序的脚本中?

如何将 jQuery 插件导入 babel 应用程序