karma.conf.js 中忽略了 babel webpack 配置？

Question

我正在尝试使用 Karma 和 Jasmin 进行我的第一个 JS 单元测试。我正在测试一个 React 应用程序。

我用 "karma init" 生成了 karma 配置并修改了它，见下面的 karma.config.js karma.config.js中需要webpack.config，但是babel loader却被完全忽略了，为什么？我注意到它被忽略了，因为它导致了未定义变量等错误...... 当直接在 karma.config.js (copy/paste) 中添加部分 webpack.config.js 时，它可以工作，但这不是我想要的，因为我正在复制加载程序和别名等代码...如何解决这个问题？另见下面 webpack.config.js

karma.config.js:

module.exports = function (config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: 'src/js/',
        frameworks: ['jasmine'],
        files: [
            'tests/*.test.js',
        ],
        preprocessors: {
            '**/tests/*.test.js': ['webpack', 'sourcemap'],
        },

        webpack: require("../webpack.conf.js"),
        webpackMiddleware: {
            stats: "errors-only"
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['PhantomJS'],
        phantomJsLauncher: {exitOnResourceError: true},
        singleRun: false,
        concurrency: Infinity
    })
};

webpack.config.js:

module.exports = function (env) { 
    if (env !== undefined) {
        let analyse = !!env.analyse;
        console.log("Analyse?: " + analyse);
        if (analyse) {
            plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'})); 
        }
    }

    return {
        entry: {
            entry: ['./src/entry.js', './src/js/utils.js'],
        },
        devtool: devTool,
        devServer: devServer,
        output: {
            path: __dirname + '/dist',
            filename: '[name]-[hash].cache.js', // it contains the name ".cache", that is used in the webserver config.
            sourceMapFilename: '[name]-[hash].cache.js.map',
        },
        module: {
            rules: [
                { // The Babel loader:
                    test: /(\.jsx|\.js)$/, 
                    exclude: /(node_modules|bower_components)/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['babel-preset-es2015', 'babel-preset-react'].map(require.resolve),
                            plugins: ['babel-plugin-transform-react-jsx-img-import'].map(require.resolve) // It will convert the used images to to "require" statements such that it's used by a loader below.
                        }
                    }]
                },
                { 
                    test: /\.s?css$/,
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                { 
                    test: /\.(png|gif|jpe?g)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: 'resources/images/[name]-[hash]-cache.[ext]'
                        }
                    }]
                },
                { 
                    test: /\.(otf|svg|eot|ttf|woff2?)(\?.*$|$)/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            name: 'resources/fonts/[name]-[hash]-cache.[ext]'
                        }
                    }]
                },
            ]
        },
        plugins: plugins,
        externals: ['axios'],
        resolve: {
            alias: {
                // Ref: https://webpack.js.org/configuration/resolve/
                Context: path.resolve(__dirname, 'src/js/context'),
                Utils: path.resolve(__dirname, 'src/js/utils'),
                ....etc...
            },
        }
    };
};

Answer 1

在karma.config.js中：

webpack: require("../webpack.conf.js")

您给 "webpack" 一个函数而不是一个对象。你应该立即调用它（有或没有 env 参数）require("../webpack.conf.js")()

karma.conf.js 中忽略了 babel webpack 配置？

babel webpack configuration ignored in karma.conf.js?

reactjs

karma-jasmine

webpack

karma-webpack