Relative paths in package.json?

Question

I've got a project where src/main/webapp/com/mycompany/frontend/page/index.js depends on target/webjars/log4javascript/1.4.10/log4javascript.js.

I've added package.json alongside index.js with the following contents:

{
    "browser":
        {
            "log4javascript": "../../../../../../../target/webjars/log4javascript/1.4.10/log4javascript.js"
        }
}

I've got many other dependencies in the target directory. Is there a way for me to avoid repeating ../../../../../../../target/ for every dependency?

Solution 1

Check out the section Using Non-Relative Paths in this article.

You can use grunt-browserify's aliasMapping option to specify the root of your app:

aliasMappings: [{
  cwd: 'src',
  dest: 'myApp',
  src: ['**/*.js']
}]

and then you can directly refer to everything from the root path, without having to ever use any dreaded ../'s:

require("myApp/target/webjars/log4javascript/1.4.10/log4javascript.js")

Of course, this doesn't resolve the problem that it's still a very long path.

The article's next paragraph makes a very good point: if you're calling things way over at the other end of your application like that, it's a good sign that things may not be correctly architected.

Can you split the functionality into smaller modules? Perhaps make log4javascript its own module?

---

Add to my answer, from discussion below:

If log4javascript is in your package.json file as a browser (non-NPM) module, you should just be able to require it with require('log4javascript')

Solution 2

One option is to put the directory that contains your local modules, or a symlink to it, in node_modules, such as node_modules/app and then reference your requires as app/..., e.g. I believe this would work

{
    "browser":
        {
            "log4javascript": "app/target/webjars/log4javascript/1.4.10/log4javascript.js"
        }
}

Or you could structure it however you want, e.g. node_modules/log4javascript (which, if you have symlinks, could point to /whatever/target/webjars/log4javascript).

This makes it so that require() will find it in the same fashion as npm modules, without publishing it to npm. The main drawback to this is that it breaks the ability to programatically configure transforms, e.g. with browserify('app/entry').transform(whatever), app/entry and other files in the dependency graph that are under node_modules will not have the transform applied to them.

Comments

[Gili]

log4javascript is an example of a non-npm library, which is why I am referencing it as a local file. How would I make it "its own module" without publishing it to npm? Also, I forgot to mention: I need this solution to work for gulp.

[Sam Fen]

Here's how to use non-NPM libraries as modules: stackoverflow.com/questions/28061040/…

[Gili]

I already know that (since I posted that question). That solution works, but doesn't solve the problem with relative paths.

[Sam Fen]

Ha, didn't notice that you asked that question. However, I'm confused as to why it doesn't answer your question. Once you have the module named "log4javascript" in your package.json, you can just require it with require('log4javascript') and browserify will find it. Doesn't that solve your long-path issue?

[Gili]

No, it does not. I am trying to avoid long paths in package.json, not just the require() statement.

[Sam Fen]

Ahhh... I totally leapt to the assumption that you were talking about require paths. My complete mistake. I guess I've just never seen a project where the package.json file wasn't at the root of the project. It seems very odd to have it all the way up in a nested folder. But I'm sure there are reasons...