使用Webpack导入RequireJS AMD模块。

Question

我是一名有用的助手，可以为您翻译文本。

我正在使用Converse.js，并将其预构建到RequireJS/AMD语法中。如果从CDN包含文件，则可以像require(['converse'], function (converse) { /* .. */ })这样使用它。如何在webpack中使用它？我想将converse.js与我的webpack输出捆绑在一起。

我已经将文件保存在磁盘上，并希望像导入其他文件一样导入它。

import converse from './converse.js';
converse.initialize({ .. });

Webpack会正确地捆绑这个文件，但是它还无法使用，因为它会抛出“initialize不是一个函数”的错误。我缺少什么？

- bitten

---

尝试运行 console.log(converse)。它会打印什么？ - Frxstrem

为什么不使用npm版本？https://www.npmjs.com/package/converse.js - Andy Ray

@AndyRay 因为它不是npm上的模块，而是被构建后发布的。npm基本上是“托管”应用程序。老实说，我不知道为什么它在npm上。 - bitten

@Frxstrem 一些“Jed”对象。使用我在问题中提供的第一个代码示例，我可以访问许多内容，包括initialize。如果我运行上面的代码，我会得到“initialize不是函数”的错误提示。 - bitten

@bitten 是啊，这真的很令人困惑。 - buddhiv

Answer 1

我怀疑他们的捆绑方式无法与Webpack在有限上下文中评估模块的方式正确配合。

从他们的构建中获取通过NPM构建的AMD模块而不带依赖项，应该可以被Webpack解析，并使你能够提供依赖项，以避免最终输出中的重复。

如果其他方法都失败了，使用script-loader将在全局上下文中评估脚本，这将使你获得与从CDN引用的体验相同，只是不要忘记为你的linter配置全局变量。

- Filip Dupanović

---

我正在使用脚本加载器 import converse from 'script-loader!./node_modules/converse.js/dist/converse.js'，然后稍后使用模块 require(['converse'], converse => { .. }，然后webpack抱怨找不到模块“converse”。你知道有什么方法可以阻止webpack解析该require语句吗？ - bitten

我解决了。在我的webpack配置中，我使用externals: {'converse': 'converse'}将converse列为外部依赖项。虽然它给我一个1.build.js文件，其中只包含module.exports = converse;。如果我可以在这个文件中拥有整个库，那就太完美了，这样它就可以异步加载库，非常适合我的用例。这是我接下来要做的事情！ - bitten

@bitten script-loader应该可以帮助你，因为它只是将整个脚本作为字符串写入块中；确保你正在使用压缩后的converse.js源代码。 - Filip Dupanović

是的，我明白了。所以脚本加载器将库作为字符串包含在内。虽然将Converse列为外部模块，但Webpack会给我生成一个似乎多余的额外文件。你知道是否有一种方法可以告诉Webpack/script-loader将库转储到生成的额外文件中吗？这样库就可以在稍后异步加载。我似乎无法解决这个问题，也不知道是否可能。 - bitten

我最终使用了 script-loader 来加载 Converse，然后告诉 Webpack 它是一个外部模块，现在它基本上可以工作了。非常感谢你的回答，帮助我解决了问题。 - bitten

谢谢。script-loader 对我没用，但是 externals 加上 @bitten 的 require(['converse'], converse => { .. } 可以。我在 HTML 头部加载 converse.min.js 以确保它在我的 webpack 统一的块之前被加载。 - Tsan-Kuang Lee