hm. no one here. well, for future readers: browserify is just pulling in its magic dependencies from its own package.json file. in other words: your version of browserify affects your bundled javascript, you can get different results from the same package.json and identical versions of package in your node_modules
but yes, the builtins used by browserify are based on the version of browserify, not of the node you're using to build
{
"main": "./js/entry.js",
"browser": {
"jquery": "./js/vendor/jquery.js"
},
"browserify-shim": {
"jquery": "$",
"three": "global:THREE"
},
"browserify": {
"transform": [ "browserify-shim" ]
},
"dependencies": {
"browserify-shim": "~3.2.0"
}
}
in this (their main example), it's fetching
jquery from the a js file the user maintains. I'd rather just use the browserified module and install and maintain it via npm install jquery
but I don't know if this would work:
...
"jquery-ui": {
"depends": [
"jquery:jQuery"
]
},
...
I only needed to worry about jquery plugins
Is it better for plugin authors to push to
b.pipeline or b.pipeline.get('wrap')? See: https://github.com/zoubin/factor-vinylify/pull/1#discussion_r63813785
Hi folks - I wonder if you could help me? I have been trying to build a bundle where a particular core module is swapped out for something else i.e. I need
require('net') to return something particular after bundling. There is documentation that alludes to this being possible, but I honestly can't understand what incantation to use. I'd greatly appreciate any hints. Thanks.
i have al ad of config files that i want to keep separate
If I'm understanding your problem correctly, you may be able to solve it using bulkify: https://www.npmjs.com/package/bulkify
Hi all, I'm trying to require some .md (markdown) files in a javascript file but not having much luck. I've installed stringify and added the transform to my gulp task but still getting a syntax error for unexpected # (which is a header in the first markdown file it is trying to require)
any tips on where I should be looking to sort this out would be much appreciated
do you know how to have browserify not bundle in react
and basically use the globally available version
and basically use the globally available version
React whenever require('react') is called?
but i am still seeing react bundled in
do I need to do some manual shimming with
module.exports = React or something?
i basically want to use script tags to include react and react-dom and then have my module just use those shims
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" }}
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
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.jsBut 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
@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
@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
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)