在Webpack中需要第三方RequireJS模块

Require third party RequireJS modules with Webpack

本文关键字：第三方 RequireJS 模块 Webpack      更新时间：2023-09-26

我正在开发一个需要使用AMD模块的ReadiumJS库的应用程序。该应用程序本身是用es6/webpack和babel编写的。我已经让供应商包正常工作，并且它正在拉入构建的Readium文件，但是当我试图要求任何模块时，Webpack说它无法解决它们。有人在Webpack和RequireJS中这样做过吗?这里有一些信息可能会有所帮助-不知道还能包括什么，因为这是我第一次真正使用Webpack.

<

文件夹结构/strong> 

/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条目/strong> 

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, requirements还是Readium?试着调试，但找不到任何有用的东西…

更新8/12/2016

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

然而，我仍然不清楚如何正确导入AMD模块与webpack。我的意思是:

假设我在 moneyservice . amp .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文件，它将所有模块捆绑到一个文件中?

好了，有一个电子ePub阅读器的repo使用Readium，它使用webpack: https://github.com/clebeaupin/readium-electron这显示了一个用webpack处理拉入RequireJS模块的好方法。

我发现一个超级棒的事情是你可以指定output.library和output.libraryTarget, webpack将从一个模块格式转到另一个…该死的!所以，我可以导入requirejs模块，分别将输出库和libraryTarget设置为' reader -js'和'commonjs2'，然后在我的应用程序代码中，我可以做import Readium from 'readium-js';

相关文章：