Question

我正在开发一个需要引入ReadiumJS库的应用程序，该库使用AMD模块。该应用程序本身是用es6 w / webpack和babel编写的。我已经让供应商捆绑工作正常，并且它正在提取内置的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？尝试调试，但找不到任何有用的东西......

更新8/12/2016

我认为这与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(); 
}

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

Answer 1

好的，那里有一个使用Readium的电子ePub阅读器的回购，它使用的是webpack：https://github.com/clebeaupin/readium-electron这显示了处理带有webpack的RequireJS模块的好方法。

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

要求第三方RequireJS模块与Webpack

1 个答案: