-
Notifications
You must be signed in to change notification settings - Fork 683
Use the paths
option of browserify to avoid relative paths hell
#17
Comments
Some useful things to read about this: |
!!!!!!!!!!! THANK YOU. I've been looking for a way to do that for some time now! This is awesome. |
hehe :) tell me if you had the same issues I had please |
hello @greypants still not in gulp starter? :) maybe i'll do a PR then Btw I've done a project inspired by your gulp starter that you may mention on your Readme for interested users: https://github.com/stample/gulp-browserify-react-phonegap-starter |
This isn't a requirement for me but it would be good to see pull requests like this making it into the repo. At the moment this project has been the best (and simplest) setup of Gulp that I've found. @greypants have you thought about adding other contributors to the repo? (like @slorber) I'd hate to see the repo stagnate :) |
nice. thanks. |
Thanks for reminding me about this. I've been hesitant to immediately add it, since it's not a documented browserify option. Is there a good reason for that? It certainly is super useful, but I wanted to take some time to think about any negative implications before adding it. Can you guys think of any? Naming conflicts is the only one I can think of. |
@greypants I use this in a real application and didn't have any problem until now. You can find it there too: This works fine for me. As I use relative paths that are relative to my src folders, I do not use simple requires like But it may happen if you name one of your own module |
@greypants I've updated my SO answer as I have more insights on this: |
@slorber thanks for documenting this! |
Another possible option if there's hesitation to use |
thanks @solomonhawk I added it to my SO answer |
Perhaps gulp-started needs to be updated with this? https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md |
Thanks! This was huge, especially when trying to use browserify-shim on bower dependencies like angular. package.json
gulpfile.js
|
I'm having a bit of an issue with this as well as I don't want '../../../' all over my files. In my browserify task, I have the following config
And in my
But when I run
Since I'm specifying a root path, I'm confused as to why
|
Did you try? var player = require('lib/player') |
Right, I must have inadvertently moved /lib out of /js. Things seem to be functioning properly now. |
Moved from browserifyi to webpack, so closing this out. The option in webpack is: resolve-modulesdirectories |
By chance is it explained somewhere why you choose to replace browserify with webpack? |
Blog post forthcoming perhaps. In short, it's way more powerful. You can output multiple bundles, extract shared dependencies into a shared bundle, async module loading is silly easy, it's smart about dynamic requires, and more. Been using it for almost a year now and haven't looked back. |
I'm having issues with babelify caching my src/node_modules files, does anyone know how to get around that? |
Is there a command line version of this? |
…ervice, storageService; disabled e2e tests in travis
Hello, i'm also looking for a command line version for this path option. Any tips ? |
yes @Heliodromel it's just and env variable |
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 browserify/browserify#767 http://stackoverflow.com/questions/28078780/relative-paths-in-package-json npm/npm#1558 http://stackoverflow.com/questions/31624567/webstorm-es6-named-import-getting-cannot-resolve-symbol-error/31631415 http://stackoverflow.com/questions/20158401/how-do-i-manage-relative-path-aliasing-in-multiple-grunt-browserify-bundles/23608416#23608416 vigetlabs/blendid#17 (comment)
Based on your project, I've build some starter app structure (that I'll publish soon), to create Phonegap/Cordova apps using Gulp / Browserify / React...
What really bothered me with your project was the fact that in our app, the browserify components we create could not be required using module style but only relative paths.
This leads to things like `require("./../../../../MyModule") which is a real pain when we refactor, move files and need our brain to think about how much nesting we need or things like that...
One solution to this problem is to use the
paths
option of browserify.In my case, I have just added some
/js/
folder to thispaths
, because it is the folder in which I put all js files I develop:(for an unknown reasons, I had to put the
./node_modules
or it wouldn't work, I opened some bug for that)This way, instead of doing
require("./../../common/MyUtil")
orrequire("./../../../../../common/MyUtil")
based on where I am currently in the path, I can simply dorequire("common/MyUtil")
everywhere in my code.Another option is that the build file can find all subdirectories of the
/js/
directory and then add them all to the path, like shown here: https://gist.github.com/sbrekken/05937e81927802452f48This way one can simply use
require("MyUtil")
(maybe in this case it would worth trying to see how browserify handle naming conflicts in case your own filename already matches an existing npm module)
The text was updated successfully, but these errors were encountered: