webpackJsonp 未使用 karma-webpack 定义?
webpackJsonp not defined using karma-webpack?
我正在用 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 未定义。我想知道我是否在这个配置中遗漏了什么。
在对这个问题发生的原因或方式进行了一些研究后,我发现有一个 web pack 的插件与 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。 Here is another reference to this problem.
您可以通过更改加载到 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
文件加载了这个文件。我想有时出于某种未知原因,这个公共块文件在我的其他模块文件之后加载,因此浏览器投诉。
我从 BundleConfig.cs
中删除了 commons.chunk.js 包含,并使用普通脚本标记将其添加到页面,就在我的包 class:
之前
<script type="text/javascript" src="@Url.Content("~/Scripts/build/commons.chunk.js")"></script>
@Scripts.Render("~/bundles/myModules")
我正在用 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 未定义。我想知道我是否在这个配置中遗漏了什么。
在对这个问题发生的原因或方式进行了一些研究后,我发现有一个 web pack 的插件与 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。 Here is another reference to this problem.
您可以通过更改加载到 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
文件加载了这个文件。我想有时出于某种未知原因,这个公共块文件在我的其他模块文件之后加载,因此浏览器投诉。
我从 BundleConfig.cs
中删除了 commons.chunk.js 包含,并使用普通脚本标记将其添加到页面,就在我的包 class:
<script type="text/javascript" src="@Url.Content("~/Scripts/build/commons.chunk.js")"></script>
@Scripts.Render("~/bundles/myModules")