These are chat archives for milankinen/livereactload

8th
Mar 2016
Matti Lankinen
@milankinen
Mar 08 2016 10:57
Hmmm very strange...
Does that happen if you don't require your Search component from Main?

Also, what do you mean by saying?

another thing, why all file contents are imported? it should import only exports

Muhammad Aref
@LeoAref
Mar 08 2016 12:04

@milankinen I was asking if browserify will import react two time or only once, I tried it and it is smart enough to import it once (so no problem here)

The second question was asking about the way of importing files, for example:

var _two = 2;
function add (x, y) {
    return x + y;
}
module.exports = add;
Matti Lankinen
@milankinen
Mar 08 2016 12:05
Aaah sorry I misunderstood your question
Muhammad Aref
@LeoAref
Mar 08 2016 12:05
now if I imported that file here
// another file
var add = require('add');
Matti Lankinen
@milankinen
Mar 08 2016 12:06
Browserify will handle the dependencies so that react gets included only once
Muhammad Aref
@LeoAref
Mar 08 2016 12:06
we will import inly add function? or the whole code inside the first file???
Matti Lankinen
@milankinen
Mar 08 2016 12:06
and yes. module.exports is the CommonJS way of importing stuff
If you are using ES6 (e.g. babelify), then you can use export and import syntax (more here https://egghead.io/lessons/ecmascript-6-es6-modules-es2015-import-and-export)
Muhammad Aref
@LeoAref
Mar 08 2016 12:08
@milankinen we will import only add function? or the whole code inside the add file???
I tested it and found that it's importing the whole content, and it's logical, because function add may depends on another function or variable in the file. Right??
Matti Lankinen
@milankinen
Mar 08 2016 12:29
yes
but it imports the content only once
this is normal behaviour of Browserify (and other bundlers), please take a look at https://github.com/substack/browserify-handbook
Muhammad Aref
@LeoAref
Mar 08 2016 12:50
:thumbsup:
Muhammad Aref
@LeoAref
Mar 08 2016 13:10

@milankinen can you clarify this:
Note however that you can't do:

// this doesn't work
exports = function (n) { return n * 1000 }

because the export value lives on the module object, and so assigning a new value for exports instead of module.exports masks the original reference.

Instead if you are going to export a single item, always do:

// instead
module.exports = function (n) { return n * 1000 }
Matti Lankinen
@milankinen
Mar 08 2016 13:11
that because you are only replacing exports variable inside the module, it doesn't replace exports contents
however when you are using module.export = ... you are actually replacing module's content and the replaced content is shown outside
Muhammad Aref
@LeoAref
Mar 08 2016 13:12
is module.exports === exports ??
if yes, why we can't use exports = ... ?!
Matti Lankinen
@milankinen
Mar 08 2016 13:13
because then module.exports !== exports
Muhammad Aref
@LeoAref
Mar 08 2016 13:14
because module.exports is the same as exports and is initially set to an empty object. :)
I don't understand this: so assigning a new value for exports instead of module.exports masks the original reference. here is the clue
Matti Lankinen
@milankinen
Mar 08 2016 13:47
not like that
think your module as a function:
const module = window
module.exports = {}
function yourModule(exports) {

}
yourModule(module.exports)
now if you re-assign exports variable, nothing gets changed outside your function
Muhammad Aref
@LeoAref
Mar 08 2016 15:53
why, we send module.exports by reference, so exports inside the function is reference to module.exports outside the function. Right?!
Matti Lankinen
@milankinen
Mar 08 2016 15:56
but your are not modifying the contents, only the reference
that's why
Muhammad Aref
@LeoAref
Mar 08 2016 15:58
ah, by reassigning the content, we lose the reference, Thanks :thumbsup: