These are chat archives for systemjs/systemjs

11th
Jan 2016
λex Vincent
@alexisvincent
Jan 11 2016 00:39
How would I get dead code removal based on process.env.NODE_ENV working in the builder?
globalDefs: {
?
}
Wanting to streamline my build. Or would the recommendation be to include external libs and add an adapter lib?
λex Vincent
@alexisvincent
Jan 11 2016 00:49
Im specifically wanting this for React
Guy Bedford
@guybedford
Jan 11 2016 11:14
@alexisvincent process.env.NODE_ENV dead code removal applies automatically in SystemJS builder for the CommonJS module format with minification enabled
it does not apply for other module formats though otherwise
λex Vincent
@alexisvincent
Jan 11 2016 15:04
@guybedford Oh thats nice :) Although I see no diffirence in the size of my bundle with NODE_ENV = ‘production’ or NODE_ENV=‘development'
And I’m importing react
Guy Bedford
@guybedford
Jan 11 2016 15:06
@alexisvincent it should definitely be applying, if you can see NODE_ENV still existing as a string in the source then that probably means it didn't work. Feel free to post an issue if you suspect something is up.
λex Vincent
@alexisvincent
Jan 11 2016 15:06
Ill check it quickly
@guybedford Is it suppose to be used as process.env.NODE_ENV ?
λex Vincent
@alexisvincent
Jan 11 2016 15:12
Because it seems like its not being replaced if it is. Unless Im doing this wrong. I just did a console.log(process.env.NODE_ENV) And built that. However it complains
Guy Bedford
@guybedford
Jan 11 2016 15:15
@alexisvincent you'd need to ensure it is CommonJS and that minification is enabled. That is via module.exports = process.env.NODE_ENV; and jspm bundle test.js -m.
λex Vincent
@alexisvincent
Jan 11 2016 15:16
Babel compiles ES2015 to cjs right?
λex Vincent
@alexisvincent
Jan 11 2016 15:22
@guybedford Im doing this through the SystemJS builder in a node module. The builder should do this automatically as well right?
heres the builder code
utils.builder.bundle('app/web/web', 'build/bundle.js', { 
    minify: true, 
    mangle: false, 
    sourceMaps: false, 
    lowResSourceMaps: true,
    globalDefs: {
        NODE_ENV: 'production'
    }

})
λex Vincent
@alexisvincent
Jan 11 2016 15:31
Hmm.. I wonder if the 'babel-core/register’ module isnt messing this up… I call it at the top of the build script… And later on do the systemjs build… @guybedford thoughts?
Guy Bedford
@guybedford
Jan 11 2016 15:33
@alexisvincent you don't need to use globalDefs to do this, it is included automatically. And you probably want mangle set to true.
But make sure the code that uses NODE_ENV is loaded as CJS
λex Vincent
@alexisvincent
Jan 11 2016 15:34
@guybedford Sure. This was just for testing. How do I do this?
Shouldnt it be done automatically?
app/web/web is es6
and I do a bundle call on it.
Does that seem correct?
Guy Bedford
@guybedford
Jan 11 2016 15:36
@alexisvincent if the module that contains the NODE_ENV code is not es6 it won't be done automatically
globalDefs does not work for NODE_ENV because it is process.env.NODE_ENV that is the optimization in CJS
if you have a cjs module in the tree, with minification enabled, then process.env.NODE_ENV will be optimized out as value production
λex Vincent
@alexisvincent
Jan 11 2016 15:37
oh I see. So what is the recomended method for bundling react in production?
Guy Bedford
@guybedford
Jan 11 2016 15:37
there really isn't more to it than that
just to build it with minification
and make sure you are loading it as CJS not say a global build
λex Vincent
@alexisvincent
Jan 11 2016 15:37
im doing an import react from ‘react'
Guy Bedford
@guybedford
Jan 11 2016 15:38
but if its a good global build then you don't need it anyway
that part is irrelevant
λex Vincent
@alexisvincent
Jan 11 2016 15:38
How do I make sure its loading as cjs
λex Vincent
@alexisvincent
Jan 11 2016 15:58
Sorry @guybedford, but I’m a bit confused as to how to do this? I have a pretty standard setup. One entry point. Im using the builder with the code shown above. I then load the bundle in a script tag and do an Import ogf the entrypoint. Is there anything ele that I should be doing to get this to work? The builder has NODE_ENV set to production
Guy Bedford
@guybedford
Jan 11 2016 17:14
@alexisvincent if you want help you should be sure to ask very specific questions. I've already asked you a number of questions above to get started along debugging this road, which you did not respond to.
Sean Anderson
@MeoMix
Jan 11 2016 17:15
:fire:
λex Vincent
@alexisvincent
Jan 11 2016 17:23
@guybedford I’ve tried to give as much information as possible and to make my environment as transparent as possible (with code examples). I went back to check if there are any questions I neglected to answer, but I cant find the questions you refered to. Perhaps the issue is that Im not so familiar with the project and there are certain things that are obvious to you, but that I still need to figure out. What information are you looking for?
Guy Bedford
@guybedford
Jan 11 2016 17:32
I mentioned the simplest possible test case for you to try and see how this dead code removal works in https://gitter.im/systemjs/systemjs?at=5693c70987cb99b53b886702 and I mentioned in https://gitter.im/systemjs/systemjs?at=5693cb5fd739f50a3602e581 and https://gitter.im/systemjs/systemjs?at=5693cb5fd739f50a3602e581 that you don't need to set NODE_ENV yourself for this to work, as well as repeatedly describing the mechanism.
Given that, you need to then isolate, and either work down from your example case, or up from the simple demo case I've given you, to find yourself a good question to ask further.
Boudewijn van veen
@bsvveen
Jan 11 2016 21:03
i am trying to get typescript debugging to work in VS, which requires systemjs to load the javascript using a scripttag and not trough an ajax call. I put scriptLoad: true in my system.config but its not working Are there any known issues/conflicts with this?
Guy Bedford
@guybedford
Jan 11 2016 21:05
@alexisvincent I did a React test again today and it definitely is removing the NODE_ENV optimizations fine (a search in the bundle file shows this doesn't exist anywhere in the code), the issue is specifically that it isn't removing conditional requires from the tree determined by if (process.env.NODE_ENV != 'production') require('x') style expressions. I've created jspm/jspm-cli#1417 to track a possible React production workflow.
@BoudewijnvanVeen scriptLoad is meta associated with a specific module, and not a global option.
System.config({ meta: { 'module/x.js': { scriptLoad: true } } })
note compatibility is limited for that option, and it usually needs to go along with explicitly setting format, globals, exports options as well
Boudewijn van veen
@bsvveen
Jan 11 2016 21:07
@guybedford ok thanks..i will try and experiment with that. you know of a working example i can use as cheat sheet?