webpackJsonp 没有使用 karma-webpack 定义？

Question

我正在使用 webpack 构建样板，并使用 mocha 构建 karma。

这是我用于 karma-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 start karma.local.conf.js 时，它不会执行测试，因为它在浏览器中显示 webpackJsonp 未定义。我想知道我是否在此配置中遗漏了什么。

Answer 1

您可以通过更改加载到 Karma 浏览器中的文件的顺序来解决此问题。

karma.conf.js

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

共享（在我的例子中）是定义“webpackJsonp”的文件。 通过将这个放在文件的顶部，它将在其他 js 文件之前加载。解决错误。

Answer 2

在我的基于 Asp.Net MVC 5 的 Web 应用程序的浏览器中也遇到了同样的问题：

"webpackJsonp is not defined"

虽然我没有使用 Karma。我找到的解决方案是将公共块文件移动到基​​于普通脚本标记的包含。我之前是通过 Asp.Net MVC 的捆绑 BundleConfig.cs 文件加载这个文件的。我猜有时出于某种未知原因，这个公共块文件在我的其他模块文件之后加载，因此浏览器投诉。

我从 BundleConfig.cs 中删除了 commons.chunk.js 包含，并使用普通脚本标记将其添加到页面中，就在我的 bundle 类之前：

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

Answer 3

在对为什么或如何发生此问题进行一些研究后，我发现有一个 webpack 插件与 karma 混淆。

所以配置结果是：

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