配置 karma.js 以使用 React 和 ES6
Configure karma.js to work with react and ES6
我试图用 ES6 开发一个反应模块,但找不到任何生成器,所以我不得不从一个基本的生成器开始。我能够配置几乎所有的东西,但是我在尝试配置业力、测试我的模块时遇到了很多问题。
这是我的 karma.conf.js
// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-03-17 using
// generator-karma 0.9.0
module.exports = function(config) {
'use strict';
config.set({
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// base path, that will be used to resolve files and exclude
basePath: '../',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['commonjs', 'mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
'node_modules/react/react.js',
'lib/**/*.js',
'test/**/*.js'
],
preprocessors: {
'lib/**/*.cjsx': ['cjsx'],
'test/**/*.cjsx': ['cjsx'],
'lib/**/*.js': ['babel', 'commonjs'],
'test/**/*.js': ['babel', 'commonjs']
},
babelPreprocessor: {
options: {
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
},
// list of files / patterns to exclude
exclude: [
],
// web server port
port: 8080,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
'Chrome', 'PhantomJS'
],
// Which plugins to enable
plugins: [
'karma-commonjs',
'karma-cjsx-preprocessor',
'karma-babel-preprocessor',
'karma-phantomjs-launcher',
'karma-chrome-launcher',
'karma-mocha',
'karma-chai'
],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
colors: true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// Uncomment the following lines if you are using grunt's server to run the tests
// proxies: {
// '/': 'http://localhost:9000/'
// },
// URL root prevent conflicts with the site root
// urlRoot: '_karma_'
});
};
此时出现如下错误
Chrome 42.0.2311 (Mac OS X 10.10.2) ERROR
Uncaught ReferenceError: module is not defined
at /Users/admin/workspace/open_source/react-component-inspector/node_modules/react/react.js:1
如果我从文件部分删除 React 引用,我会收到另一个错误
PhantomJS 1.9.8 (Mac OS X) ERROR
Uncaught Error: Could not find module 'react' from '/Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js'
at /Users/admin/workspace/open_source/react-component-inspector/node_modules/karma-commonjs/client/commonjs_bridge.js:85
如果我删除 commonJS,我会得到
PhantomJS 1.9.8 (Mac OS X) ERROR
ReferenceError: Can't find variable: exports
at /Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js:5
或者至少有人可以向我推荐一个带有业力、ES6、jsx 的 yo 生成器来构建模块,而不是 Web 应用程序吗?
感谢帮助
我相信您只需要将反应文件的路径添加到预处理器文件列表中即可。这是因为 react 文件也像您的应用程序文件一样使用 commonjs 格式,并且当该文件在 chrome 中加载时,与节点不同,浏览器不知道 "module" 对象来自何处.更新了以下代码的摘录。
// list of files / patterns to load in the browser
files: [
'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
'node_modules/react/react.js',
'lib/**/*.js',
'test/**/*.js'
],
preprocessors: {
// you can probably leave off babel here.
'node_modules/react/react.js': ['babel', 'commonjs'],
'lib/**/*.cjsx': ['cjsx'],
'test/**/*.cjsx': ['cjsx'],
'lib/**/*.js': ['babel', 'commonjs'],
'test/**/*.js': ['babel', 'commonjs']
},
我试图用 ES6 开发一个反应模块,但找不到任何生成器,所以我不得不从一个基本的生成器开始。我能够配置几乎所有的东西,但是我在尝试配置业力、测试我的模块时遇到了很多问题。
这是我的 karma.conf.js
// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2015-03-17 using
// generator-karma 0.9.0
module.exports = function(config) {
'use strict';
config.set({
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// base path, that will be used to resolve files and exclude
basePath: '../',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['commonjs', 'mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
'node_modules/react/react.js',
'lib/**/*.js',
'test/**/*.js'
],
preprocessors: {
'lib/**/*.cjsx': ['cjsx'],
'test/**/*.cjsx': ['cjsx'],
'lib/**/*.js': ['babel', 'commonjs'],
'test/**/*.js': ['babel', 'commonjs']
},
babelPreprocessor: {
options: {
sourceMap: 'inline'
},
filename: function (file) {
return file.originalPath.replace(/\.js$/, '.es5.js');
},
sourceFileName: function (file) {
return file.originalPath;
}
},
// list of files / patterns to exclude
exclude: [
],
// web server port
port: 8080,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: [
'Chrome', 'PhantomJS'
],
// Which plugins to enable
plugins: [
'karma-commonjs',
'karma-cjsx-preprocessor',
'karma-babel-preprocessor',
'karma-phantomjs-launcher',
'karma-chrome-launcher',
'karma-mocha',
'karma-chai'
],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
colors: true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// Uncomment the following lines if you are using grunt's server to run the tests
// proxies: {
// '/': 'http://localhost:9000/'
// },
// URL root prevent conflicts with the site root
// urlRoot: '_karma_'
});
};
此时出现如下错误
Chrome 42.0.2311 (Mac OS X 10.10.2) ERROR
Uncaught ReferenceError: module is not defined
at /Users/admin/workspace/open_source/react-component-inspector/node_modules/react/react.js:1
如果我从文件部分删除 React 引用,我会收到另一个错误
PhantomJS 1.9.8 (Mac OS X) ERROR
Uncaught Error: Could not find module 'react' from '/Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js'
at /Users/admin/workspace/open_source/react-component-inspector/node_modules/karma-commonjs/client/commonjs_bridge.js:85
如果我删除 commonJS,我会得到
PhantomJS 1.9.8 (Mac OS X) ERROR
ReferenceError: Can't find variable: exports
at /Users/admin/workspace/open_source/react-component-inspector/lib/index.es5.js:5
或者至少有人可以向我推荐一个带有业力、ES6、jsx 的 yo 生成器来构建模块,而不是 Web 应用程序吗?
感谢帮助
我相信您只需要将反应文件的路径添加到预处理器文件列表中即可。这是因为 react 文件也像您的应用程序文件一样使用 commonjs 格式,并且当该文件在 chrome 中加载时,与节点不同,浏览器不知道 "module" 对象来自何处.更新了以下代码的摘录。
// list of files / patterns to load in the browser
files: [
'node_modules/karma-babel-preprocessor/node_modules/babel-core/browser-polyfill.js',
'node_modules/react/react.js',
'lib/**/*.js',
'test/**/*.js'
],
preprocessors: {
// you can probably leave off babel here.
'node_modules/react/react.js': ['babel', 'commonjs'],
'lib/**/*.cjsx': ['cjsx'],
'test/**/*.cjsx': ['cjsx'],
'lib/**/*.js': ['babel', 'commonjs'],
'test/**/*.js': ['babel', 'commonjs']
},