我试图让webpack（babel），业力，茉莉，角和es6一起工作。到目前为止，我疯了。我经历了这么多的错误，花了一整天的谷歌搜索错误。现在这是我最近的错误。
我需要一些帮助来完成它。以下是我的所有设置。我做错了什么？我误解了什么？
错误：
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"
]
}
}
答案 0 :(得分：0)
以下是karma-jasmine，angular，webpack和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"
}
}
测试看起来像这样
export default ngModule => {
describe('ng app test', () => {
beforeEach(window.module(ngModule.name));
it('should defign module', () => {
expect(ngModule).toBeDefined();
});
});
};
使用npm run test