0

webpackを使用してIsotopeでpackeryレイアウトモードを使用しようとしています。

現在のセットアップ:

これは、同位体のパッカリー レイアウトを呼び出しているファイルです。

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 モジュールを使用する場合、Isotope の jQuery プラグイン インターフェイスにパッチを適用するには、Bridget をインストールする必要があります。
  • isotope-packeryPackery オプションを使用するには、必須である必要があります。 isotope-layout
于 2016-01-05T18:11:46.960 に答える