Webpack业力茉莉-尝试运行测试的requirejs错误

Question

I'm trying to make webpack(babel), karma, jasmine, angular and es6 works together. I'm going nuts so far. I've been throught so many error and spending a whole day googling errors. Now this is my most recent error.

I need some help to get it done. Below follows all my settings. What I'm doing wrong? what did I misunderstand?

Error:

Chrome 47.0.2526 (Mac OS X 10.10.2) ERROR
  Uncaught Error: Module name "path" has not been loaded yet for context: _. Use require([])
  http://requirejs.org/docs/errors.html#notloaded

karma.conf.js

var webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', 'requirejs'],

        reporters: ['progress'],
        port: 9876,
        colors: false,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        autoWatchBatchDelay: 300,

        files: [
            './node_modules/karma-requirejs/lib/index.js',
            './node_modules/angular/angular.js',
            './node_modules/angular-mocks/angular-mocks.js',
            './node_modules/angular-sanitize/angular-sanitize.js',
            './node_modules/jasmine-core/lib/jasmine-core.js',
            './node_modules/lodash/index.js',
            './node_modules/moment/moment.js',
            './src/**/*.js',
            './tests/**/*.js'
        ],

        preprocessors: {
            './src/**/*.js': ['babel'],
            './tests/**/*.js': ['webpack']
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            noInfo: true
        },

        plugins : [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-requirejs',
            'karma-webpack',
            'karma-babel-preprocessor'
        ]

    });
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    context: path.resolve('src'),
    entry: './app.js',
    output: {
        path: path.resolve('dist'),
        //publicPath: '/',
        filename: 'bundle.js'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],

    module: {

        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel'
            },

            // load html by require/import
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html'
            },

            {
                test: /\.css$/,
                exclude: /node_modules/,
                loaders: ['style', 'css']
            }

        ]

    },

    watch: true
}

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "http-server app",
    "test": ""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.4.7",
    "angular-sanitize": "^1.4.8",
    "lodash": "^3.10.1",
    "moment": "^2.10.6"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.8",
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^1.7.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.19",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-chrome-launcher": "^0.2.2",
    "karma-cli": "^0.1.2",
    "karma-jasmine": "^0.3.6",
    "karma-requirejs": "^0.2.3",
    "karma-webpack": "^1.7.0",
    "requirejs": "^2.1.22",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

Answer 1

Here is my working example with karma-jasmine, angular, webpack and es6!

webpack.config

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
var config = {
    context: __dirname + '/src',
    entry: './index.js',
    output: {
        path: __dirname + '/src',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.DefinePlugin({
            ON_TEST: process.env.NODE_ENV === "test",
            ON_PRODUCTION: process.env.NODE_ENV === "production",
            ON_DEVELOPMENT: process.env.NODE_ENV === "development"
        })
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['ng-annotate', 'babel?presets=es2015'],
            exclude: /node_modules/
        }, {
            test: /\.html$/,
            loader: 'raw',
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: 'style!css!sass'
        }, {
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader?limit=10000&minetype=application/font-woff"
        }, {
            test: /\.(ttf|eot|svg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader"
        }, {
            test: /\.json$/,
            loader: 'json'
        }, {
            test: /\.scss$/,
            loader: "style!css!sass"
        }]
    }
};
if (process.env.NODE_ENV === "production") {
    config.output.path = __dirname + "/dist";
    config.plugins.push(new webpack.optimize.UglifyJsPlugin());
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
    config.plugins.push(new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }));
    config.devtool = 'source-map';
} else if (process.env.NODE_ENV === "development") {
    config.output.path = __dirname + "/dist";
    config.plugins.push(new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }));
} else {
    config.plugins.push(new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }));
}
module.exports = config;

karma.conf

var path = require('path');
var webpackConfig = require('./webpack.config');
var entry = path.resolve(webpackConfig.context, webpackConfig.entry);
var preprocessors = {};
preprocessors[entry] = ['webpack'];
module.exports = function(config) {
  config.set({

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


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine','mocha'],


    // list of files / patterns to load in the browser
    files: [entry],
    webpack:webpackConfig,

    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors:preprocessors,


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultanous
    concurrency: Infinity,
    plugins:[
      require('karma-webpack'),
      ('karma-jasmine'),
      ('karma-mocha'),
      ('karma-chrome-launcher')
    ]
  })
}

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server  --content-base src"
  },
  "author": "js",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.4.9",
    "angular-animate": "^1.4.9",
    "angular-aria": "^1.4.9",
    "angular-material": "^1.0.2",
    "angular-material-icons": "^0.6.0",
    "angular-ui-bootstrap": "^1.1.0",
    "angular-ui-router": "^0.2.15",
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.2.0",
    "moment": "^2.11.1",
    "restangular": "^1.5.1",
    "lodash": "^3.10.1",
    "angular-messages": "^1.4.8"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.8",
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "bower-webpack-plugin": "^0.1.9",
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.2",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.0",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^1.7.0",
    "imports-loader": "^0.6.5",
    "json-loader": "^0.5.4",
    "lazypipe": "~1.0.1",
    "less": "^2.5.3",
    "less-loader": "^2.2.2",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.2",
    "karma-mocha": "^0.2.1",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.3.4",
    "ng-annotate-loader": "0.0.10",
    "ngtemplate-loader": "^1.3.1",
    "node-sass": "^3.4.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^3.1.2",
    "should": "~7.1.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "vinyl": "~1.0.0",
    "webpack": "^1.7.2",
    "webpack-core": "^0.5.0",
    "webpack-dev-server": "^1.7.0",
    "yargs": "~3.30.0"
  }
}

test look like this

export default ngModule => {
  describe('ng app test', () => {
    beforeEach(window.module(ngModule.name));
    it('should defign module', () => {
      expect(ngModule).toBeDefined();
    });
  });
};

runing test with npm run test