Konfiguriere karma.js um mit react und ES6 zu arbeiten

Question

Ich versuche ein Reaktionsmodul mit ES6 zu entwickeln und konnte dafür keinen Generator finden, also musste ich es aus einem einfachen machen. Ich war in der Lage, fast alles zu konfigurieren, aber ich habe viele Probleme, versuchen Karma zu konfigurieren, um mein Modul zu testen.

Das ist mein 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_' 
    }); 
}; 

An dieser Stelle ich die folgenden Fehler

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 

habe, und wenn ich die Referee Abschnitt von Dateien reagieren entfernen erhalte ich diese anderen Fehler

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 

Und wenn ich die commonJS entfernen, bekomme ich

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 

Oder zumindest kann mir jemand einen yo Generator mit Karma, ES6, Jsx empfehlen, ein Modul, keine Web-App zu bauen?

Danke für die Hilfe

Answer 1

Ich glaube, man muss nur die Pfad der Datei in der Liste der Prä-Prozessor-Dateien reagieren hinzufügen. Dies liegt daran, dass die react-Datei auch das commonjs-Format verwendet, genau wie die Dateien Ihrer App, und wenn diese Datei in chrome geladen wird, hat der Browser im Gegensatz zu node keine Vorstellung davon, woher das "module" -Objekt kam. Aktualisierter Auszug aus Ihrem Code unten.

 // 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'] 
     },