What is `_dereq_()` inside React?

Question

I'm searching through react-0.13.3.js and one thing I can't work out. At the very start of the source there's a bunch of dereq() calls.

'use strict';

var EventPluginUtils = _dereq_(19);
var ReactChildren = _dereq_(32);
var ReactComponent = _dereq_(34);
var ReactClass = _dereq_(33);

But nowhere do I see an implementation for that function. What does it do and how does it work? And most importantly, where is it declared?

Answer 1

This is likely derequire combined with browserify (or other bundler?) module ids. It's a way to rename require in your output bundle so as to avoid collisions.

Read here for more information: https://github.com/calvinmetcalf/derequire/issues/25

The basic idea is that different module loaders handle require differently. "Derequire" is a strategy for binding your requires to your context via a different keyword.

Answer 2

It has to do with amd module loader. _dereq_ is the first argument so it's the require function.

Answer 3

You need to expand line 4 in the source; it's require.

1: [function(_dereq_, module, exports) {

Answer 4

I have stumbled on this question, after some research, I think the main purpose of having this function is to build a similar npm like feature on your browser and handle module dependency on importing different functions.

if you go straight to the end of the IIFE (about 20k~ lines)

you will see a structure similar to below

(function e(t, n, r) {
    function s(o, u) {
       ...
    }

       ...
}) ({...  //blah blah blah, all the funcitons 
     }, {}, [1])


the variable t is all the functions modules
the variable n is an empty array
 the variable r is 1 here

so the require module is called in the right order, and is built from index 1, from there, it is pretty self-explanatory, all dependencies needs to be correctly programmed from the array on the outset

1: [function (_dereq_, module, exports) {....
}, {"106": 106, "23": 23, "35": 35, "45": 45, "63": 63}],