hammer.js - 将 MaterializeCSS 与 Webpack 一起使用 - 无法解析模块“hammerjs”

Question

我正在用 webpack 构建一个项目。该项目使用materializecss. 当我添加materialize.js到入口文件时，它会抱怨以下错误 Cannot resolve module 'hammerjs'

当我打开文件时，我可以在那里看到定义，但似乎 webpack 无法识别它。淘汰赛-es6中的weakmap也是如此。hammer.min.js我对此的解决方案是添加对in的引用，resolve.alias但不确定这是否正确。

webpack当它们与有问题的库捆绑在一起时，我如何识别这些依赖关系 - 在这种情况下materialize.js？

score 8 · Accepted Answer

只要您已经hammerjs安装到您的项目（即。npm i hammerjs --save），它应该找到它。正如@egunays 所指出的，您还应该import 'expose?Hammer!hammerjs/hammer能够访问Hammer对象。

如果您担心可能的重复（您可以通过检查生成的捆绑包来验证这一点），您可以使用webpack.optimize.DedupePlugin. webpack.optimize.CommonsChunkPlugin也可以派上用场。这将允许您将应用程序代码与供应商捆绑包分开。

有关更多信息，请参阅官方优化文档。

score 6 · Accepted Answer

为此最好使用 ProvidePlugin。

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "Hammer": "hammerjs/hammer"
}),

这不需要额外的加载器，实际上在文档中推荐：

在某些情况下，您希望模块将自身导出到全局上下文。除非你真的需要，否则不要这样做。（最好使用 ProvidePlugin）1

2 回答 2