在 webpack 中加载砌体布局

Question

我有一个基于angular2-webpack-starter 的angular 2 项目。它正在使用 webpack，它适用于很多导入，甚至是 jQuery 插件..

我现在正试图让angular2-masonry 工作，但这取决于masonry-layout 包（npm module / github source），它不能很好地发挥作用...... 导入 (import * as masonry from 'masonry-layout') 无法正常工作，并给出错误 Cannot find module 'masonry-layout'.。

如何让 webpack 将其视为一个模块？

我已经尝试过（仅相关的 webpack 配置）；

将别名设置为masonry.pkgd.js

module.exports = {
  resolve: {
    alias: {
      'masonry-layout': 'masonry-layout/dist/masonry.pkgd.js'
    }
  }
}

给出同样的错误

将别名设置为masonry.js

module.exports = {
  resolve: {
    alias: {
      'masonry-layout': 'masonry-layout/masonry.js'
    }
  }
}

同样的错误

添加自定义加载器，并按照建议安装 imports-loader here

module.exports = {
  module: {
    loaders: [
      {
        test: /masonry-layout/,
        loader: 'imports?define=>false&this=>window'
      }
    ]
  }
}

同样的错误！

只有将第一个 ('masonry-layout': 'masonry-layout/dist/masonry.pkgd.js') 和最后一个结合起来，我才得到另一个错误；

ERROR in ./~/masonry-layout/dist/masonry.pkgd.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./item in /.../node_modules/masonry-layout/dist
 @ ./~/masonry-layout/dist/masonry.pkgd.js 1351:6-23

但除此之外，我仍然收到Cannot find module 'masonry-layout'. 错误。

我还是 webpack 的新手，所以我可能会错过一些明显的东西......

Answer 1

试试npm install masonry-layout。我之前遇到了同样的问题，我只是安装了原始的 masonry 包，而不是直接 angular 来解决在 angular2-masonry 中找到它。