使用 Webpack 需要第三方 RequireJS 模块

Question

我正在开发一个需要引入 ReadiumJS 库的应用程序，该库使用 AMD 模块。该应用程序本身是用带有 webpack 和 babel 的 es6 编写的。我已经让 vendor bundle 正常工作，并且它正在引入内置的 Readium 文件，但是当我尝试要求任何模块时，Webpack 说它无法解析它们。有人曾经用 Webpack 和 RequireJS 做过吗？这里有一些信息可能会有所帮助 - 不确定还包括什么，因为这是我第一次真正使用 Webpack..

文件夹结构

/readium-src
  /readium-js
    / *** all readium-specific files and build output (have to pull down repo and build locally)
/node_modules
/src
  /app.js -> main entry for my app

/webpack.config.babel.js

webpack.config.js 条目

entry: {
    vendorJs: [
        'jquery',
        'angular',
        '../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js',
        'bootstrap/js/alert.js' //bootstrap js example
    ],
    appJs: './app.js'
}

试图在 app.js

中要求它

var readiumSharedGlobals = require('readium_shared_js/globals');

我从来没有真正开始使用 RequireJS，所以真的很难理解如何使用 webpack 将这种类型的模块与其他类型的模块一起使用。非常感谢任何帮助:)

更新

如果我将我的 app.js 改成使用这个：

window.rqReadium = require('../readium-src/readium-js/build-output/_single-bundle/readium-js_all.js');

然后它似乎试图加载所有模块，但我得到一个奇怪的错误：

Uncaught Error: No IPv6

在这一点上，我不确定

我是否必须像那样要求整个路径？
这个错误是来自 webpack、requirejs 还是 Readium？尝试调试，但找不到任何有用的东西...

2016 年 8 月 12 日更新

我认为这与 Readium 所依赖的库的问题有关：https://github.com/medialize/URI.js/issues/118

但是，我仍然不清楚如何使用 webpack 正确导入 AMD 模块。这就是我的意思：

假设我在 moneyService.amd.js 中定义了一个 amd 模块，如下所示：

define('myMoneyService', ['jquery'], function($) {
    //contrived simple example...
    return function getDollaz() { console.log('$$$'); }
});

然后，在兄弟文件中，app.js，我想拉入那个文件。

//this works
var getDollaz = require('./moneyService.amd.js');

//this works
require(['./moneyService.amd.js'], function(getDollaz) { getDollaz(); }

//this does not
require(['myMoneyService' /*require by its ID vs file name*/], function(getDollaz) {
    getDollaz(); 
}

那么，如果我们不能要求命名模块，我们将如何使用将所有模块捆绑到一个文件中的第三方库的 dist 文件？

Answer 1

好的，所以有一个使用 Readium 的 Electron ePub reader 的回购协议，它使用的是 webpack：https://github.com/clebeaupin/readium-electron 这显示了使用 webpack 处理引入 RequireJS 模块的好方法。

我发现的一个超级棒的事情是你可以指定 output.library 和 output.libraryTarget 并且 webpack 将从一种模块格式转换为另一种模块格式......太棒了！因此，我可以导入 requirejs 模块，将输出库和 libraryTarget 分别设置为 'readium-js' 和 'commonjs2'，然后在我的应用程序代码中我可以执行 import Readium from 'readium-js';

使用 Webpack 需要第三方 RequireJS 模块

Require third party RequireJS modules with Webpack

javascript

amd

requirejs

webpack