webpackJsonp не определен с помощью karma-webpack?

Question

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

Это конфигурация, которую я использую для карма-webpack. Я новичок в 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.local.conf.js она не выполняет тесты becouse он говорит в браузере webpackJsonp не определен. Мне было интересно, не хватает ли я чего-то в этой конфигурации.

Answer 1

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

karma.conf.js

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

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

Answer 2

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

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

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); 
}; 

Так что я удалил Webpack плагин CommonsChunkPlugin. Вот еще одна ссылка на эту проблему.

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

Answer 3

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

"webpackJsonp is not defined" 

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

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

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