javascript - 配置 karma.js 以使用 react 和 ES6

Question

我尝试用 ES6 开发一个 react 模块，但找不到任何生成器，所以我不得不从一个基本的生成器开始。我能够配置几乎所有的东西，但是我在尝试配置 karma 、测试我的模块时遇到了很多问题。

这是我的 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 ref，我会得到另一个错误

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

或者至少有人可以向我推荐一个带有 karma 、ES6、jsx 的 yo 生成器来构建模块，而不是网络应用程序吗？

感谢帮助

Answer 1

我相信您只需要将 react 文件的路径添加到预处理器文件列表中即可。这是因为 react 文件也像您的应用程序文件一样使用 commonjs 格式，并且当该文件在 chrome 中加载时，与节点不同，浏览器不知道“模块”对象来自何处。更新了以下代码的摘录。

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