Fails to export a module if the argument is the function name

[danbovey]

I'm using babili on two separate React projects through the babili-webpack-plugin. Apologies for the crap issue title, I'm not sure what sort of hellish issue this is.

The first couple of characters into the minified JS bundle fails because it can't access window.$, as in the shorthand for the query selector.

(function(J){function X(Z){if($[Z])return$[Z].exports;var oe=$[Z]={ // many KB of JS ->

First thoughts: I'm not telling babili to generate browser-ready code but I can't find any documentation on that.

So I was able to hack a solution by adding this before the bundle <script> because it doesn't mangle the fact that it is $. And everything 100% works once it has that line.

<script>$ = window.$</script>

But the second project that I've started mangles it into H:

(function(o){function U(W){if(H[W])return H[W].exports;var Y=H[W]={ // many KB of JS ->

So now I'm even more lost. The first repo is open source so the production webpack process, package.json and .babelrc are all here: https://github.com/danbovey/Dekt

[boopathi]

because it doesn't mangle the fact that it is $

Babili does NOT treat $ as a special identifier. It's just yet another valid Identifier.

If there is $ used as a variable in the code, it means that some variable foo has been replaced with $. Doing $ = window.$ will only introduce more bugs.

And babili already detects usages of global variables, say $, and does NOT rename to these global names ($). So if you have usages of a global $ (where you did not define $ in the code that passes through babili) in your code and babili still mangled some variable foo to $ then this is a bug.

[danbovey]

OK just spent a while comparing the minified and unminified bundle trying to find the problem.

The problem wasn't at the start of the file. Babili is converting this function in the pure-color module:

function hex(hex) {
  if (hex.length === 4) {
    hex = '#' + hex.charAt(1) + hex.charAt(1) +
      hex.charAt(2) + hex.charAt(2) +
      hex.charAt(3) + hex.charAt(3);
  }
  return [
    parseInt(hex.substring(1,3), 16),
    parseInt(hex.substring(3,5), 16),
    parseInt(hex.substring(5,7), 16)
  ];
}

module.exports = hex;

to:

function(o){o.exports=H}

So I think it is a bug with the minifier not recognising that the function hex and the argument hex are different.

If I rename the argument in that module, it exports all of the logic properly.

function(o){o.exports=function(W){return 4===W.length&&(W='#'+W.charAt(1)+W.charAt(1)+W.charAt(2)+W.charAt(2)+W.charAt(3)+W.charAt(3)),[parseInt(W.substring(1,3),16),parseInt(W.substring(3,5),16),parseInt(W.substring(5,7),16)]}}

[boopathi]

Fixed in #414

[danbovey]

Do you plan on releasing this on npm soon?

Or, alternatively, how do I install the master branch of babili while using babili-webpack-plugin?

[boopathi]

If you're dependencies are flat, (npm >= 3 | yarn ), then you can install babili-webpack-plugin and npm link babel-preset-babili in your codebase. So babili-webpack-plugin can use this master version of babel-preset-babili.