Karma，React 上的 Browserify 在 LESS 上失败了答案

【问题标题】：Karma, Browserify on React is failing on LESSKarma，React 上的 Browserify 在 LESS 上失败了
【发布时间】：2015-02-26 12:00:36
【问题描述】：

我正在学习如何使用 React，然后使用 Karma 作为测试运行器。我正在使用 browserify / reactify (mocha+kai) 运行 Karma。每当我运行npm test 时，都会出现以下错误：

ERROR [framework.browserify]: bundle error
ERROR [framework.browserify]: 
/Users/user/Projects/example-d3-react/src/d3Chart.less:1
.d3 {
^
ParseError: Unexpected token
ERROR [karma]: [TypeError: Not a string or buffer]

这发生在项目中的所有 LESS 文件上。我曾尝试向 karma.conf 添加 LESS 预处理器，如下所示：

preprocessors: {
    'src/*.less': ['less'],
    'tests/**/*.js': ['browserify']
},

browserify: {
    debug: true,
    transform: [ 'reactify' ]
},
lessPreprocessor: {
      options: {
        paths: ['src'],
        save: true,
        rootpath: './'
      },
      additionalData: {
        modifyVars: {
          'bodyColor': 'grey',
          'secondBoxColor': 'blue'
        },
        globalVars: {
          'globalBoxColor': 'red'
        }
      },
      transformPath: function(path) {
        console.log("transforming");
        return path.replace(/\.less$/, '.compiled.css');
      }
    },

【问题讨论】：

应该'src/*.less': ['less'], 可能是'src/*.less': [lessPreprocessor'],
@BassJobsen 只是尝试过但无济于事，业力预处理器被称为 less afaik。有什么方法可以让 browserify 在代码中以编程方式忽略 require('d3.less')，例如将其设置为忽略的 JSHint 注释？
您是否在 conf 中的某处定义了 plugins: ['karma-less-preprocessor']？
@Eelke 我没有定义plugins:，它会自动拉入它们。添加 'plugins: ['karma-less-preprocessor']' 需要我现在添加之前自动加载的所有插件（即karma-browserify），但您的修复确实有效。添加作为获得赏金的答案:)
我希望您的 *.less 是由其他预处理器意外编译的。 Less 编译器会抛出一个不同的错误，例如 ERROR [preprocessor:less]: Error:Error: missing closing }。 npm test 运行哪个命令（请参阅您的 Gulpfile.js），可能类似于 node node_modules/karma/bin/karma start karma.conf.js，确保业力使用了正确的 karma.conf.js 文件

标签： less karma-runner reactjs browserify

【解决方案1】：

将预处理器显式添加到配置中：plugins: ['karma-less-preprocessor']

【讨论】：

当你不加载karma-less-propressor 业力应该返回：WARN [preprocess]: Can not load "less", it is not registered! Perhaps you are missing some plugin?
这个问题没有得到纠正正如@BassJobsen所说，如果它不包括在内，它会发出警告，但它没有。我只能通过移除 LESS 来解决它

【解决方案2】：

建议的答案都没有帮助我，但如果有人遇到这个问题，对我有用的解决方案只是将项目特定的 less 转换添加到 package.json 文件。例如：

{
...
  "browserify": {
    "exclude": "*.spec.js",
    "transform": [
      "node-lessify",
      "browserify-ng-html2js"
    ]
  },
...
}

执行此操作时构建中断，因为我在通过 NPM 构建应用程序时使用了 cmd 行转换。删除了 cmd 行转换部分，因为 package.json 转换将应用转换 programmatically，现在它又可以工作了。

【讨论】：