hughsk / disc

:chart_with_upwards_trend: Visualise the module tree of browserify project bundles and track down bloat.
http://hughsk.io/disc
Other
1.33k stars 83 forks source link

Manage external package only bundle #41

Closed armandabric closed 7 years ago

armandabric commented 9 years ago

I'm using the external functionality of browserify to generate my javascript files. It produce two files: app.js and vendor.js. Using disc with the app.js works perfectly. But it's do not work on the vendor.js :sob:

Here the blueprint of how I generate my two packages:

// app.js 
var b = browserify('client.js', {...});

// I externalyse some dependencies
var dependencies = ['lodash', 'react', 'react-router'];
for (var i in dependencies) {
     b.external(dependencies[i]);
}

b.bundle() // It's a gulp task, so the rest of the file is not the point of this code 
// vendor.js
var b = browserify(null,  {...}); // Here is the issue I think

var dependencies = ['lodash', 'react', 'react-router']; // same array of external dependencies as before
for (var i in dependencies) {
    b.require(dependencies[i]);
}

b.bundle() 

I guess is thatdisc cannot work on my vendor.js file because there no entry point in this bundle var b = browserify(null, {...});.

If I build all my dependencies in my app.js bundle, everything works.

Tell me if you want my vendor.js file.

SystemParadox commented 9 years ago

+1

jbalboni commented 9 years ago

+1

beck commented 7 years ago

I get the same error.

Digging into it, there are a couple things at play.

browser-unpack needs to be bumped

Needs v1.x so you can do:

browser-unpack < bundle.vendor.js

<1.0 will output "couldn't parse this bundle".

full paths

As far as I can tell, browserify does not support both --full-paths with --require

Demo:

$ browserify --full-paths --require "hello-world-js" > bundle.vendor.js
$ browser-unpack < bundle.vendor.js
[
{"id":"hello-world-js","source":"var helloString = 'Hello world!';\r\n\r\nvar hello = function hello() {\r\n  return helloString;\r\n};\r\n\r\nmodule.exports = {\r\n  hello: hello\r\n}","deps":{}}
]

Whereas, notice the full paths:

$ echo "require('hello-world-js');" > main.js
$ browserify --full-paths main.js > bundle.main.js
$ browser-unpack < bundle.main.js
[
{"id":"/Users/doug/Desktop/main.js","source":"require('hello-world-js');","deps":{"hello-world-js":"/Users/doug/Desktop/node_modules/hello-world-js/src/index.js"},"entry":true}
,
{"id":"/Users/doug/Desktop/node_modules/hello-world-js/src/index.js","source":"var helloString = 'Hello world!';\r\n\r\nvar hello = function hello() {\r\n  return helloString;\r\n};\r\n\r\nmodule.exports = {\r\n  hello: hello\r\n}","deps":{}}
]

Ideally disc would be refactored to remove the full path requirement.