Get browserify require paths to behave more like requirejs

Question

I'm finding that it's a pain when moving files around and constantly having to rewrite the file include paths to be relative to their new folder.

I want to avoid this in my browserify code:

var View = require('../../../../base/view');

And do something more in line with requirejs where it knows my base path is js:

var View = require('base/view');

Solution 1

You should use the paths option. It is not documented in browserify but in node-browser-resolve (used under the hood):

paths - require.paths array to use if nothing is found on the normal node_modules recursive walk

Solution 2

A great option here is to use the aliasify plugin, available here. Then just add something like this to your package.json, with all paths in the aliasify config being relative to the position of that file:

  "browserify": {
    "transform": [
      "aliasify"
    ]
  },
  "aliasify": {
    "aliases": {
      "app": "./src/app",
      "components": "./src/components",
      "someAlias": "./src/app/some/path/to/a/place",
      "foobar": "./go/to/a/module/named/foobar",
    }
  }

Then, in your files, just do:

var foobar = require("foobar");
var sampleComponent = require("components/someSample");

//My JS code

Solution 3

node_modules

You can put your application code (or a symlink to it, if your platform supports it) under node_modules. E.g.:

node_modules/
+-- app/
    +-- js/
        +-- base/
            +-- view.js
        +-- a/
            +-- b/
                +-- c/
                    +-- somefile.js

// somefile.js                
require("app/js/base/view");

However, there's an important caveat: this breaks application of transforms specified programmatically via the API, e.g:

browserify('app/entry.js')
  .transform(es6ify)

In browserify there's a concept of "top-level" files that comes into play with transforms. That concept, and the behavior of transforms in general, is poorly explained in the browserify documentation. You can see some discussion of the issue here: substack/node-browserify#993

pathmodify

Another option is my pathmodify browserify plugin. This allows using non-relative paths and programmatic transforms. To enable browserifying code like:

var View = require('base/view');

You would do something like:

var pathmodify = require('pathmodify');

var opts = {mods: [
  // Maps require() IDs beginning with "base/" to begin with
  // "/somedir/js/base/"
  pathmodify.mod.dir("base", "/somedir/js/base"),
]};

// Give browserify the real path to entry file(s).
// pathmodify will transform paths in require() calls.
browserify('./js/entry')
  .plugin(pathmodify, opts)
  .transform(es6ify)
  .bundle()
  ...

Combined

Note that pathmodify will only solve the problem for browserify. If you need the paths like base/view to also work in another context, like node, then if you have symlinks available you can combine the two. For example, symlink node_modules/base to /somedir/js/base, and also configure pathmodify as indicated and continue to point browserify to paths outside of node_modules for entry files.

Comments

[eightyfive]

In browserify doc there is an option called opts.basedir that I understand is doing what you are looking for: opts.basedir is the directory that browserify starts bundling from for filenames that start with . BUT, I cannot to get it to work myself (with gulp-browserify)

[Mojtaba Pourmirzaei]

and How to do it: derickbailey.com/2015/09/30/…