webpackJsonp не определен с использованием karma-webpack?

Question

Я строю шаблон с webpack и карма с мокко.

Это конфигурация, которую я использую для karma-webpack. Я новичок в вебпаке.

var path          = require('path');
var webpack = require('webpack');
var entries =  {
  "app": ["./index.js"]
};
var root            = './';
var testSrc         = path.join(root, 'tests/');
var jsSrc           = path.join(root, 'src/javascripts/');
var publicPath      = path.join(root , 'public/');
var filenamePattern = 'index.js';
var extensions      = ['js'].map(function(extension) {
  return '.' + extension;
});


var webpackConfig = {
  context: jsSrc,
  resolve: {
    root: jsSrc,
    extensions: [''].concat(extensions)
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }]
  },
  entry: entries,
  output: {
    filename: filenamePattern,
    publicPath: publicPath
  },
  plugins: [new webpack.optimize.CommonsChunkPlugin({
    name: 'shared',
    filename: filenamePattern,
  })]
};

var karmaConfig = {
  frameworks: ['mocha'],
  files: ['tests/test-index.js'],
  preprocessors: {
    'tests/**/*.js': ['webpack']
  },
  webpack: webpackConfig,
  webpackMiddleware: {
    noInfo: true,
  },
  singleRun: false,
  autoWatch: true,
  colors: true,
  reporters: ['nyan'],
  browsers: ['Chrome'],
  plugins: [
    require("karma-nyan-reporter"),
    require("karma-mocha"),
    require("karma-firefox-launcher"),
    require("karma-webpack"),
    require("karma-chrome-launcher")
  ]
};
module.exports = function(config) {
  config.set(karmaConfig);
};

Когда я запускаю karma start karma.local.conf.js, он не выполняет тесты, потому что он говорит, что в браузере webpackJsonp не определен. Мне было интересно, если я что-то упустил в этой конфигурации.

Answer 1

Вы можете решить эту проблему, изменив порядок файлов, загружаемых в браузер Karma.

karma.conf.js

files: [
            'build/shared.js',
            'build/**/*.js',
        ]

Shared (в моем случае) это файл, в котором определен "webpackJsonp". Поместив этот файл в верхнюю часть файлов, он будет загружен перед остальными js-файлами. Решение ошибки.

Answer 2

У меня также была такая же проблема с браузером в моем веб-приложении на основе Asp.Net MVC 5:

"webpackJsonp is not defined"

хотя я не использую карму. Решение, которое я нашел, состояло в том, чтобы переместить файл общего ресурса в обычное включение на основе тегов сценария. Ранее я загружал этот файл через пакет Asp.Net MVC BundleConfig.cs файл. Я думаю, иногда по какой-то неизвестной причине этот общий файл загружается после других файлов моего модуля и, следовательно, жалоб браузера.

Я удалил включение commons.chunk.js из BundleConfig.cs и добавил его на страницу, используя обычный тег script, прямо перед моим классом связки:

<script type="text/javascript" src="@Url.Content("~/Scripts/build/commons.chunk.js")"></script>
@Scripts.Render("~/bundles/myModules")

Answer 3

Проведя некоторое исследование о том, почему или как эта проблема возникала, я обнаружил, что есть плагин веб-пакета, мешающий карме.

Таким образом, результатом конфигурации будет:

var path          = require('path');
var webpack = require('webpack');
var entries =  {
  "app": ["./index.js"]
};
var root            = './';
var testSrc         = path.join(root, 'tests/');
var jsSrc           = path.join(root, 'src/javascripts/');
var publicPath      = path.join(root , 'public/');
var filenamePattern = 'index.js';
var extensions      = ['js'].map(function(extension) {
  return '.' + extension;
});


var webpackConfig = {
  context: jsSrc,
  resolve: {
    root: jsSrc,
    extensions: [''].concat(extensions)
  },
  resolveLoader: {
    root: path.join(__dirname, "node_modules")
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }]
  },
  entry: entries,
  output: {
    filename: filenamePattern,
    publicPath: publicPath
  }
};

var karmaConfig = {
  frameworks: ['mocha'],
  files: ['tests/test-index.js'],
  preprocessors: {
    'tests/**/*.js': ['webpack']
  },
  webpack: webpackConfig,
  webpackMiddleware: {
    noInfo: true,
  },
  singleRun: false,
  autoWatch: true,
  colors: true,
  reporters: ['nyan'],
  browsers: ['Chrome'],
  plugins: [
    require("karma-nyan-reporter"),
    require("karma-mocha"),
    require("karma-firefox-launcher"),
    require("karma-webpack"),
    require("karma-chrome-launcher")
  ]
};
module.exports = function(config) {
  config.set(karmaConfig);
};

Поэтому я удалил плагин веб-пакета CommonsChunkPlugin. Вот еще одна ссылка на эту проблему.

https://github.com/webpack/karma-webpack/issues/24