javascript - 使用 Webpack 需要第三方 RequireJS 模块

Question

我正在开发一个需要拉入 ReadiumJS 的应用程序库，它使用 AMD 模块。该应用程序本身是用 es6 w/webpack 和 babel 编写的。我已经让 vendor 包正常工作，并且它正在拉入构建的 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

目前我还不确定

1. 我是否必须要求这样的整个路径？
2. 此错误是否来自 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(); 
}

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

Answer 1

好的，有一个使用 Readium 的 Electron ePub 阅读器的存储库，它使用 webpack:https://github.com/clebeaupin/readium-electron这展示了一种使用 webpack 处理 RequireJS 模块拉取的好方法。

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