0

我正在尝试将 Isotope 中的打包布局模式与 webpack 一起使用。

当前设置：

这是我调用同位素包装布局的文件。

Isotope = require 'isotope-packery'

iso = new Isotope '.js-isotope',
  # main isotope options
  itemSelector: '.js-isotope__item'
  # set layoutMode
  layoutMode: 'packery'
  packery:
    gutter: 10

我不断收到错误Uncaught TypeError: Cannot read property 'packery' of undefined。这是文件中的完整控制台和参考。

在此处输入图像描述

我是 Webpack 的新手/需要模块，所以我可能会遗漏一些明显的东西。

这是我的 webpack 配置文件：

var config = require('../config')
if(!config.tasks.js) return

var path            = require('path')
var webpack         = require('webpack')
var webpackManifest = require('./webpackManifest')

module.exports = function(env) {
  var jsSrc = path.resolve(config.root.src, config.tasks.js.src)
  var jsDest = path.resolve(config.root.dest, config.tasks.js.dest)
  var publicPath = path.join(config.tasks.js.dest, '/')
  var filenamePattern = env === 'production' ? '[name]-[hash].js' : '[name].js'
  var extensions = config.tasks.js.extensions.map(function(extension) {
    return '.' + extension
  })

  var webpackConfig = {
    externals: {
      // require("jquery") is external and available
      //  on the global var jQuery
      "jquery": "jQuery"
    },
    context: jsSrc,
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
      })
    ],
    resolve: {
      root: jsSrc,
      extensions: [''].concat(extensions)
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader?stage=1',
          exclude: /node_modules/
        },
        {
          test: /isotope\-|fizzy\-ui\-utils|desandro\-|masonry|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
          loader: 'imports?define=>false&this=>window'
        },
        // https://github.com/metafizzy/packery/issues/239#issuecomment-144992512
        {
          test: /.js$/,
          loader: 'imports?define=>false',
          include: /(fizzy\-ui\-utils|outlayer|get\-size|packery)[\\\/]/
        },
        {
          test: /\.coffee$/,
          loader: "coffee-loader"
        },
        {
          test: /\.(coffee\.md|litcoffee)$/,
          loader: "coffee-loader?literate"
        }
      ]
    }
  }

  if(env !== 'test') {
    // Karma doesn't need entry points or output settings
    webpackConfig.entry = config.tasks.js.entries

    webpackConfig.output= {
      path: path.normalize(jsDest),
      filename: filenamePattern,
      publicPath: publicPath
    }

    if(config.tasks.js.extractSharedJs) {
      // Factor out common dependencies into a shared.js
      webpackConfig.plugins.push(
        new webpack.optimize.CommonsChunkPlugin({
          name: 'shared',
          filename: filenamePattern,
        })
      )
    }
  }

  if(env === 'development') {
    webpackConfig.devtool = 'source-map'
    webpack.debug = true
  }

  if(env === 'production') {
    webpackConfig.plugins.push(
      new webpackManifest(publicPath, config.root.dest),
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify('production')
        }
      }),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin(),
      new webpack.NoErrorsPlugin()
    )
  }

  return webpackConfig
}

顺便说一句，我也无法识别同位素 jQuery 插件。 调用$('.grid').isotope()会导致Uncaught TypeError: $(...).isotope is not a function错误。我不确定它们是否有任何关系；即使我引用了 jQuery$ = require 'jquery'

任何帮助将不胜感激。

4

1 回答 1

0

看起来问题出在require一些额外的模块上。我在任何地方的文档中都找不到这个。

require 'jquery-bridget'
require 'isotope-packery'
isotope = require 'isotope-layout'

$grid = $('.l-masonry').isotope()
  • 使用 RequireJS 模块时，需要安装 Bridget 来修补 Isotope 的 jQuery 插件接口。
  • isotope-packery需要以及 isotope-layout为了使用 Packery 选项。
于 2016-01-05T18:11:46.960 回答