如何在karma测试运行程序中包含来自webpack的供应商捆绑包
如何在karma测试运行程序中包含来自webpack的供应商捆绑包
提问于 2018-01-08 18:54:12
我有一个用TypeScript写的AngularJS 1.x项目，使用的是Webpack。我现在正在尝试使用我为我的一个服务编写的示例测试来设置karma-typescript模块。
我遵循了来自here的示例karma配置文件，所以现在就开始吧：
module.exports = function (config) {
config.set({
basePath: '../',
frameworks: ['jasmine', 'karma-typescript'],
files: [
//Add library includes here...
'app/**/*.ts'
],
exclude: [
],
preprocessors: {
'app/**/*.ts': ['karma-typescript']
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}当我运行我的测试任务时，我得到一个错误，说无法找到angular。我意识到为什么，因为在我的karma配置文件中，我还没有添加我的应用程序所需的任何库。有没有一种方法可以让karma加载到供应商捆绑文件中，我的webpack配置文件被设置为要构建该文件，而不是单独添加这些内容？：
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const copy = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
main: './app/app.module.ts',
vendor: [
'jquery',
'angular',
'angular-animate',
'angular-aria',
'angular-cookies',
'angular-material',
'angular-messages',
'angular-mocks',
'angular-resource',
'angular-sanitize',
'angular-ui-bootstrap',
'angular-ui-router',
'angular-local-storage',
'bootstrap',
'less',
'lodash',
'moment',
'ui-select',
'leaflet',
'iso-currency',
'angular-leaflet-directive'
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
}, {
test: require.resolve('moment'),
use: [{
loader: 'expose-loader',
options: 'moment'
}]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
},
{
enforce: 'pre',
test: /\.tsx?$/,
use: 'source-map-loader'
},
{
test: /\.ts?$/,
exclude: /node_modules/,
use: 'ts-loader'
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new ExtractTextPlugin('./app.css'),
new CleanWebpackPlugin(['dist']),
new copy([
{ from: 'app' },
{ from: 'index.html' },
{ from: 'app/assets/fonts', to: 'assets/fonts' },
{ from: 'app/assets/iln18Support', to: 'assets/iln18Support' },
{ from: 'app/assets/images', to: 'assets/images' },
{ from: 'app/partials', to: 'partials' }
])
]
};那么，有没有一种方法可以告诉karma将我的vendor.bundle.js文件包含在由webpack输出的文件中？
我正在努力寻找好的例子\文档，所以如果有人能在这里向我推荐任何对我有帮助的，我将不胜感激！
谢谢
回答 1
Stack Overflow用户
发布于 2018-11-07 23:53:21
通过创建一个名为app/vendor.bundle.ts的新文件解决了这个问题。
而不是通过webpack配置导入所有外部供应商，现在我将它们放在捆绑包文件中。
vendor.bundle.ts文件本身如下所示：
(我也认为，将供应商与webpack配置分开的方法使webpack的配置在这里更加干净)
import 'jquery';
import 'angular';
import 'angular-animate';
import 'angular-aria';
...因此，在我的webpack配置中，我现在只有一个入口点，如下所示：
module.exports = {
entry: {
vendor: './app/vendor.bundle.ts',
main: './app/app.module.ts',
}
}
...在我的karma.conf.js中，我现在可以像这样将供应商作为一个入口点导入(请注意，我的应用程序在这里也是一个入口点)：
module.exports = function (config) {
config.set({
files: [
// Vendors
'app/vendor.bundle.ts',
// App
'app/app.module.ts',
// Load tests
'app/**/*spec.ts'
],
preprocessors: {
'app/**/*.ts': ['karma-typescript']
},
...
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48148821
复制相关文章
相似问题
腾讯云开发者
