无法读取属性＆＃39; packery＆＃39;使用Isotope和Webpack时的undefined`

Question

我试图在Isotope中使用webpack的包装布局模式。

当前设置：

• Wordpress附带的jQuery版本
• 的CoffeeScript
• 已修改Gulp Starter

这是我称之为同位素包装布局的文件。

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'

非常感谢任何帮助。

Answer 1

问题似乎是Class<T>一些额外的模块。我无法在任何地方的文档中找到它。

Foo.class

• 需要安装Bridget来修补Isotope when using RequireJS modules的jQuery插件界面。
• require需要以及 require 'jquery-bridget' require 'isotope-packery' isotope = require 'isotope-layout' $grid = $('.l-masonry').isotope() 才能使用Packery选项。