[英]webpackJsonp not defined using karma-webpack?
我正在用webpack和kocha与mocha构建一个样板文件。
这是我用于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启动karma.local.conf.js它不执行测试因为它在浏览器中说webpackJsonp没有定义。 我想知道我是否在这个配置中遗漏了一些东西。
您可以通过更改加载到Karma浏览器中的文件的顺序来解决此问题。
karma.conf.js
files: [
'build/shared.js',
'build/**/*.js',
]
共享(在我的例子中)是定义“webpackJsonp”的文件。 通过将这一个放在文件的顶部,它将在其他js文件之前加载。 解决错误。
在基于Asp.Net MVC 5的Web应用程序中,我在浏览器中遇到了同样的问题:
"webpackJsonp is not defined"
虽然我没有使用Karma。 我找到的解决方案是将公共块文件移动到基于正常脚本标记的包含。 我之前通过Asp.Net MVC捆绑BundleConfig.cs
文件加载此文件。 我猜有时由于某种未知的原因,这会在我的其他模块文件之后加载chunk文件,从而引发浏览器投诉。
我从BundleConfig.cs
删除了commons.chunk.js包含,并在我的bundle类之前使用普通脚本标记将其添加到页面:
<script type="text/javascript" src="@Url.Content("~/Scripts/build/commons.chunk.js")"></script>
@Scripts.Render("~/bundles/myModules")
在对这个问题发生的原因或方法进行了一些研究之后,我发现有一个网络包的插件搞乱了业力。
所以配置结果是:
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。 这是对这个问题的另一个参考。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.