Using Benchmarkjs with Webpack and Babel

Question

I'm trying to get some basic benchmark tests working and am having trouble figuring out the right configuration. I'm trying to use Benchmarkjs with webpack and babel to transpile my code to es5. I created a benchmarks.webpack.js as an entry point which looks like this:

var context = require.context('./src/js', true, /-benchmark\.js$/);
context.keys().forEach(context);
module.exports = context;

I then have a benchmark file that I want to run (test-benchmark.js):

import benchmark from 'benchmark';
import benchmarks from 'beautify-benchmark';

let suite = new benchmark.Suite;

suite.add('RegExp#test', function() {
  /o/.test('Hello World!');
})
.add('String#indexOf', function() {
  'Hello World!'.indexOf('o') > -1;
})
.on('cycle', function(event) {
  benchmarks.add(event.target);
})
.on('complete', function() {
  benchmarks.log();
})
.run();

I updated my webpack build to try and transpile the benchmarks:

_.assign(config, {
  devtool: 'eval-cheap-module-source-map',
  output: {
    path: path.join(__dirname, 'build/benchmark'),
    filename: 'benchmark.js',
    publicPath: '/'
  },
  entry: [
    './benchmarks.webpack.js'
  ],
  plugins: [

  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel?stage=0'],
        include: path.join(__dirname, 'src/js')
      },
    ]
  },
});

Finally, I want to be able run this from an npm script:

  "scripts": {
    "bench": "webpack --config webpack.bench.config.js && node build/benchmark/benchmark.js"
  },

However, I'm getting warnings that the result of the benchmark dependency is an expression and there no suitable loaders for the .json, .txt, etc files. I tried hacking up Benchmarkjs to export correctly but was not successful.

WARNING in ./~/benchmark/benchmark.js
Critical dependencies:
1122:34-49 the request of a dependency is an expression
 @ ./~/benchmark/benchmark.js 1122:34-49

WARNING in ./~/benchmark/package.json
Module parse failed: /home/bill/dev/levelstory/react-client-redux/node_modules/benchmark/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "benchmark",
|   "version": "1.0.0",
|   "description": "A benchmarking library that works on nearly all JavaScript platforms, supports high-resolution timers, and returns statistically significant results.",
 @ ./~/benchmark ^\.\/.*$

WARNING in ./~/benchmark/LICENSE.txt
Module parse failed: /home/bill/dev/levelstory/react-client-redux/node_modules/benchmark/LICENSE.txt Line 1: Unexpected number
You may need an appropriate loader to handle this file type.
| Copyright 2010-2012 Mathias Bynens <http://mathiasbynens.be/>
| Based on JSLitmus.js, copyright Robert Kieffer <http://broofa.com/>
| Modified by John-David Dalton <http://allyoucanleet.com/>
 @ ./~/benchmark ^\.\/.*$

Can you set up a GitHub project to debug? It's easier to resolve the issue that way. — Juho Vepsäläinen, Aug 27 '15 at 18:04
I've set up the project at https://github.com/bunkat/benchmark-webpack-babel. — Bill, Aug 27 '15 at 18:26

score 1 · Answer 1 · answered Aug 28 '15 at 04:58

Looks like benchmark does something special with require. That messes it up for Webpack. It has the following lines:

var freeRequire = typeof require == 'function' && require;

...

function req(id) {
    try {
        var result = freeExports && freeRequire(id);
    } catch(e) { }
    return result || null;
}

If you comment out the function contents, the error goes away. Given it's not ideal to patch around it this way I would poke the benchmark guys about this directly instead. Perhaps there's something we're missing.

Using Benchmarkjs with Webpack and Babel

1 Answers1