1

Webpack と backbone.paginator を使用する小さなアプリがあります。Webpackなしで完全に機能します。

コレクションで backbone.paginator を要求すると、webpack でアプリが完全に壊れてしまいます。ページネーターを使用する必要さえありません。単にそれを要求すると、アプリが壊れます。実際にはページング可能なコレクションが作成され、正しく機能しますが、ページネーターを要求した後にビューを作成しようとすると、Backbone.Marionette が定義されていないと表示されます。

モデルは次のとおりです。

 var User = require("../models/User");
 var PageableCollection = require("backbone.paginator");

 var Users = Backbone.PageableCollection.extend({
  url: 'http://localhost:8000/api/users',
  model: User,
});

module.exports = Users;

ビューがある場合は、必要になるとすぐにエラーが発生します。require('backbone-paginator') を削除すると、エラーは発生しません。

これが私のwebpack.config.jsです：

const webpack = require("webpack");
const path = require("path");

var HtmlWebpackPlugin = require("html-webpack-plugin");
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: path.join(__dirname, 'app', 'index.html'),
  filename: 'index.html',
  inject: 'body'
});

var paths = {
  ENTRY: path.join(__dirname, 'app', 'main.js'),
  OUTPUT_FILENAME: "bundle.js",
  OUTPUT: path.join(__dirname, "app", 'static'),
  APP: path.join(__dirname, 'app')
};

module.exports = {
  entry: [
    paths.ENTRY
  ],
  devServer: {
    contentBase: "./app"
  },
  resolve: {
    alias: {
      "marionette": "backbone.marionette"
    }
  },
  module: {
    preLoaders: [
     {
       test: /\.js$/,
       include: __dirname + '/app',
       exclude: [/node_modules/, paths.APP + '/public', paths.APP + '/bower_components'],
       loader: 'jshint-loader'
      }
    ],
    loaders: [
      { test: /\.html/, include: paths.APP + '/templates', loader:     "underscore-template-loader" }
    ],
  },
  output: {
    filename: paths.OUTPUT_FILENAME,
    path: paths.OUTPUT
  },
  plugins: [
    HtmlWebpackPluginConfig,
    new webpack.ProvidePlugin({
      $: 'jquery',
      _: 'underscore'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    // new webpack.optimize.DedupePlugin(),
    // new webpack.optimize.OccurenceOrderPlugin(),
    // new webpack.optimize.UglifyJsPlugin({
    //   compress: { warnings: false },
    //   mangle: true,
    //   sourcemap: false,
    //   beautify: false,
    //   dead_code: true
    // })
  ]
};

編集：ほとんどすべてを削除し、これだけに減らしました：

var Marionette = require('marionette');
var PageableCollection = require("backbone.paginator")

var Users = Backbone.PageableCollection.extend({
  url: 'http://localhost:8000/api/users'
})

var UsersView = Backbone.Marionette.View.extend({
  tagName: 'div',
  template: _.template("hello")
})

backbone.paginator を要求した後にビューを定義することはできません。マリオネットを console.log にすると、それはまだそこにありますが、ビューを定義すると、未定義であると表示されます。

4

0 に答える 0