substack/node-browserify

browser-side require() the node.js way

David Marr

@marr

having lots of trouble with browserify-shim

i have a umd module that i'm trying to browserify

its not changing the modules require('foo') to global['Foo']

even though my package.json specifies browserify-shim: { 'foo': 'global:Foo' }

do i need to target that module somehow? like browserify-shim: { 'mod': { depends: "foo" }}

Nils Magnus Djupvik

@nmdjupvik_twitter

Hi! I'm doing a transition from using bower to rely on npm (npm scripts) only for building and bundling our apps. I'm almost there, but I struggle with images in dependant modules (in node_modules). I've tried parcelify, rework etc for the css. The css bundle is fine, but I need the images in my bundled app.

If only there was plugin for making base64 replacement for urls in the css when bundling

Laszlo Korte

@laszlokorte

Hi, I am working on a pretty simple project using React with babel and browserify. I am struggling to get proper minification/uglification working.

I already tried using minifyify and uglifyify. But there are still a lot of line breaks in the final file and overall the result seems still to large.(~300-400kb)

When using minifyify and then apply to uglifyjs2 to the output the file size goes down to ~200kb.

But it feels pretty redundant and does not work with watchify.

So I guess my question is: When using babel/browserify/watchify via cli, what's the best and simplest way to do minification?

currently my build command is:

NODE_ENV=production browserify src/main.js -t babelify -g envify -v -p bundle-collapser/plugin -p [minifyify --no-map --uglify [ --compress [ --dead_code ] --mangle ] ] | uglifyjs -m -e -c dead_code,screw-ie8,warnings=false > build/bundle.js

But passing all the uglify options twice feels wrong.

I would like it to look more like:

watchify src/main.js -t babelify -g envify -p uglify -o build/bundle.js -v

Laszlo Korte

@laszlokorte

anyone?

Eli White

@TheSavior

Is there any way to profile the time spent in different transforms? My karma test suite's browserify bundle takes 4.5 minutes to compile

Terin Stock

@terinjokes

@TheSavior that's not a current feature, nor do i think it's been suggested before

Eli White

@TheSavior

@terinjokes Hmm. kk. In the mean time, do you have any recommendations for looking into this that might require a bit more mucking? I’m curious if browserify is slow because of babelify on our codebase, or just because there are purely a lot of files it has to process, or because it is pulling in really large packages like react. I have no idea how to track down where it is spending it’s time.

I used chrome’s dev tools to create some flame charts of the node process, but it didn’t seem to help point me in the right direction

Terin Stock

@terinjokes

i was going to suggest making some flame charts

Eli White

@TheSavior

@terinjokes Flame charts appear to tell me is that it was spending a lot of time reading files but I couldn’t figure out what files or what part of the stack it was. Whether it was node requiring files, or loading up babel’s deps, or something else. It sounds like you don’t have any magic bullets or grand suggesstions though and that I should keep digging

Terin Stock

@terinjokes

@TheSavior I do not. Our main website build takes > 30 seconds. I've looked into it from time to time, but have no magic bullet.

Risto Stevcev

@Risto-Stevcev

how do I debug this issue? I can't figure out at all what I'm doing wrong here

gulp.task('js:compile', function() {
  return browserify([ deployDir + '/js/pages/newModelVisualization.js'
                    ], { debug: true })
    .transform(babelify,{presets: [__dirname + "/node_modules/babel-preset-es2015-nostrict"]})
    .bundle()
    .pipe(source('modelerWizardFlow-min.js'))
    .pipe(gulp.dest('.'))
})

I get an error like this:

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module 'underscore' from '/home/velvet/tf/src-docroot/js/lib'
    at /home/velvet/tf/frontend/node_modules/resolve/lib/async.js:46:17
    at process (/home/velvet/tf/frontend/node_modules/resolve/lib/async.js:173:43)
    at ondir (/home/velvet/tf/frontend/node_modules/resolve/lib/async.js:188:17)
    at load (/home/velvet/tf/frontend/node_modules/resolve/lib/async.js:69:43)
    at onex (/home/velvet/tf/frontend/node_modules/resolve/lib/async.js:92:31)
    at /home/velvet/tf/frontend/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)

but it exists in that folder. I'm importing it as a relative path like import { _ } from './lib/underscore.js'

and when I run flow it doesn't complain that the module doesn't exist

what am I doing wrong? did I configure this wrong? how can I get browserify to at least tell me which file is giving it the error?

Risto Stevcev

@Risto-Stevcev

nvm found the issue. I just wish this was a better error

Evan Hackett

@evanhackett

does browserify not support es6 arrow functions by default? I'm getting an unexpected token arrow

Evan Hackett

@evanhackett

nvm, I think I had bad syntax. Either way I added the babeilify transform

Rye Terrell

@wwwtyro

anyone else having issues with the async keyword not being parsed when browserify-ing?

Ricky Reusser

@rreusser

is there a way to override the path of a specific require without simply linking to an external bundle?

like I'd love to simply ask it to resolve require('my-project') to /local/path/to/my-project

masonk

@masonk

I'm packaging an npm module with browserify. But it only works if I turn on uglification. If I don't then, when I import that module into my app and pack the main app (again with browserify), that second pack fails to find the dependencies that the npm module has (e.g.ERROR: Cannot find module './modules/es6.string.fontsize' )

the npm module is packed with browserify. None of its require statements should be followed by the second browserify.

James

@aretecode

browserify is still awesome.

I was making a card for my dad for fathers day, in code of course, & since I spent a fair bit the time on the card, I didn't have any to waste on a build system.

browserify -t [ browserify-css --autoInject=true ] --entry js/main.js -o index.browserified.js

index file with all the codes, full of the win.

xicond

@xicond

Hi, is anyone know how to use browserify in grunt so that "require" keyword can work ?

Jonas Amundsen

@badeball

Has anyone successfully used browserify together with yarn2 and pnp?

Where communities thrive

People

Repo info

Activity