1

公式ドキュメントは、webpack 構成を複製する必要があることを暗示しているようです。 

// Karma configuration
module.exports = function(config) {
  config.set({
    webpack: {
    // same webpack config used externally
  },
};

ただし、作業中の webpack 構成をコピーして貼り付け始めると、エラーが発生し始めました。たとえば、ES6 コードはトランスパイルされませんでした (babel が構成されていても)。Commons チャンク プラグインは、エラーが発生したため機能しませんでした。karma.conf を以下に示します。

const webpack = require('webpack');

module.exports = function(config) {
 config.set({

// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',

files: [
  'test.webpack.js' //just load this file
],
preprocessors: {
  'test.webpack.js': [ 'webpack', 'sourcemap' ] //preprocess with webpack and our sourcemap loader
},
webpack: {
  module: {
    loaders: [
      {
        test: /\/js\/.+\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react'],
          plugins: [
            'transform-es2015-destructuring',
            'transform-object-rest-spread'
          ]
        }
      },
    ],
  },

  resolve: {
    modulesDirectories: ['node_modules'],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      filename: "commons.js",
      name: "commons"
    }),
    new webpack.ProvidePlugin({
      'Promise': 'bluebird',
    })
  ],
  devtool: 'inline-source-map'
},
};
4

1 に答える 1

2

いくつかのことがあります：

  1. カルマでメインの webpack 構成を使用することは、物事を行うための 1 つの慣用的な方法のようです。残念ながら、このアプローチの問題の 1 つは、CommonsChunk や Define など、特定の webpack プラグインがカルマで機能しないように見えることです。
  2. ES6 がコンパイルされていない問題は、古いバージョンの karma および karma-webpack の使用に関連していました。https://github.com/webpack/karma-webpack/issues/129を参照してください。

私のカルマ設定:

const webpackConfig = require('./webpack.config');
const webpack = require('webpack');

webpackConfig.entry = undefined;
webpackConfig.output = undefined;
// tell webpack to ignore these files
webpackConfig.module.loaders.push([
{
  test: /\.(jpe?g|png|gif|svg|map|css|std|indent|html|txt)$/i,
  loader: 'ignore-loader',
},
]);
// karma is actually very brittle. The commons chunk plugin as well as the define plugin break it, so we
// disable these
webpackConfig.plugins = webpackConfig.plugins
  .filter(p => !(p instanceof webpack.optimize.CommonsChunkPlugin))
  .filter(p => !(p instanceof webpack.DefinePlugin));
webpackConfig.devtool = 'inline-source-map';

module.exports = function(config) {
config.set({
   webpack: webpackConfig,
   //....
于 2016-12-21T19:18:52.143 に答える