Need Root Directories in Browserify and Using NPM (eliminating the constant use of '../../../..' in both cases)

Question

Need Root Directories in Browserify and Using NPM (eliminating the constant use of '../../../..' in both cases)

Despite my extensive search for a solution to this issue, I have been unsuccessful so far – even after referring to the amazing gist on improving local require paths and thoroughly reading the Browserify handbook section on Avoiding ../../../../... I am struggling to find a viable solution for this problem.

I am currently working on a library developed with Browserify, which I intend to publish on npm. You can check it out yourself if you wish to test what I am describing here. However, the challenge lies in my desire to release it on NPM without relying on relative paths when calling require(), as it is done when using Browserify.

By utilizing Browserify's opts.paths, I managed to transform my require()s from conventional forms like

var Classy$Base = require('./base')
// and in another file
var Classy$Module = require('../../module')

to

var Classy$Base = require('classy/base')
// and in another file
var Classy$Module = require('classy/module')

This modification was successful and effective! When I execute gulp bundle, I receive a functional classy.bundle.js output, making everything seem right.

However, upon performing a npm link and linking it in another project (also using Browserify) via npm link classy-js, things start to fall apart. Error messages originating from require('classy-js') claim instances of "could not find module 'classy/base' from 'node_modules/classy-js/src...'" among others.

I envision creating a library where I can simply call require('classy-js'), along with

require('classy-js/classy/module')

to access all other beneficial submodules of the library whilst maintaining non-relative paths within the library's code.

Is there any feasible way to achieve this?

I experimented with app-module-path, which unfortunately results in Browserify errors, and I also tested require-root with similar outcomes.

I tried symlinks and incorporated an npm postInstall script for automatically setting up symlinks, yet nothing seemed to work.

It feels like this should be a more straightforward process...

javascript npm gulp browserify

Answer 1

Answer №1

After solving the problem at hand, I can't help but feel like the solution is rather simple and not very elegant. While looking into JMM's answer which may have been a viable option, I decided to take a different approach.

Both projects are using Browserify, allowing me to easily require 'classy' in the second project by simply using require('classy-js'), as it automatically looks in the node_modules directory. However, when it comes to resolving paths such as require('classy/base'), Browserify doesn't utilize the opts.paths that were used to build the Classy bundle. This results in numerous errors.

The solution I found entails an npm postinstall script that creates an empty node_modules folder (given that Classy only has devDependencies) and establishes symlinks for node_modules/classy to src/classy, and another symlink for node_modules/selfish (another top-level module in src/) to src/selfish. By implementing this method, we avoid tampering with the opts.paths of the separate project, ensuring that our improved require() statements operate seamlessly in both the browser and node.

The postinstall script configuration appears as:

// package.json
...
  "scripts": {
    "test": "gulp test",
    "postinstall": "mkdir node_modules && node create-symlinks.js"
  },
...

and the contents of create-symlinks.js are as follows:

// create-symlinks.js
var fs = require('fs')

var c  = '../src/classy'
  , s  = '../src/selfish'
  , cd = 'node_modules/classy'
  , sd = 'node_modules/selfish'
  , e  = undefined

e = fs.existsSync(cd);
if (!e) {
  console.log('link', cd, 'to', c)
  fs.symlinkSync(c, cd, 'dir')
}

e = fs.existsSync(sd)
if (!e) {
  console.log('link', sd, 'to', s)
  fs.symlinkSync(s, sd, 'dir')
}

While this method may seem somewhat unconventional, it effectively resolves the issue at hand while adopting a similar convention to the symlink suggestion proposed in the "Better Local Requires" Gist. It might not be the most graceful solution, but it gets the job done.

In terms of accessing submodules within Classy, I opted to expose any public API submodules (like Classy$Module) as a property of the main Classy object. Therefore, instead of requiring modules individually like so:

var Classy$Module = require('classy-js/module')

We can now simply do:

var Classy$Module = require('classy-js').Module

Although this method is not perfect, it serves its purpose adequately and proves to be sufficient for our needs.

Answer 2

After solving the problem at hand, I can't help but feel like the solution is rather simple and not very elegant. While looking into JMM's answer which may have been a viable option, I decided to take a different approach.

Both projects are using Browserify, allowing me to easily require 'classy' in the second project by simply using require('classy-js'), as it automatically looks in the node_modules directory. However, when it comes to resolving paths such as require('classy/base'), Browserify doesn't utilize the opts.paths that were used to build the Classy bundle. This results in numerous errors.

The solution I found entails an npm postinstall script that creates an empty node_modules folder (given that Classy only has devDependencies) and establishes symlinks for node_modules/classy to src/classy, and another symlink for node_modules/selfish (another top-level module in src/) to src/selfish. By implementing this method, we avoid tampering with the opts.paths of the separate project, ensuring that our improved require() statements operate seamlessly in both the browser and node.

The postinstall script configuration appears as:

// package.json
...
  "scripts": {
    "test": "gulp test",
    "postinstall": "mkdir node_modules && node create-symlinks.js"
  },
...

and the contents of create-symlinks.js are as follows:

// create-symlinks.js
var fs = require('fs')

var c  = '../src/classy'
  , s  = '../src/selfish'
  , cd = 'node_modules/classy'
  , sd = 'node_modules/selfish'
  , e  = undefined

e = fs.existsSync(cd);
if (!e) {
  console.log('link', cd, 'to', c)
  fs.symlinkSync(c, cd, 'dir')
}

e = fs.existsSync(sd)
if (!e) {
  console.log('link', sd, 'to', s)
  fs.symlinkSync(s, sd, 'dir')
}

While this method may seem somewhat unconventional, it effectively resolves the issue at hand while adopting a similar convention to the symlink suggestion proposed in the "Better Local Requires" Gist. It might not be the most graceful solution, but it gets the job done.

In terms of accessing submodules within Classy, I opted to expose any public API submodules (like Classy$Module) as a property of the main Classy object. Therefore, instead of requiring modules individually like so:

var Classy$Module = require('classy-js/module')

We can now simply do:

var Classy$Module = require('classy-js').Module

Although this method is not perfect, it serves its purpose adequately and proves to be sufficient for our needs.

Answer 3

Answer №2

While it may not be the most conventional method, I haven't come across a package on npm that specifically caters to this functionality. However, I believe the following approach might just do the trick:

// Declare the module name, similar to the `name` property in `package.json`.
var Classy$Base = require('classy-js/base')
// Followed by another file
var Classy$Module = require('classy-js/module')

In regards to this section:

After running npm link, followed by executing npm link classy-js in a different project (also utilizing Browserify), I encountered some issues.

To address this and align it with the initial suggestion, consider linking classy-js back to itself. For instance, if you have a directory structure like /somedir/subdir/classy-js, ensure there exists a /somedir/subdir/node_modules. Then, navigate to /somedir/subdir and run npm link classy-js. Be cautious not to have a

/somedir/subdir/classy-js/node_modules

and avoid linking from /somedir/subdir/classy-js to prevent any circular references that could disrupt module resolution.

Answer 4

While it may not be the most conventional method, I haven't come across a package on npm that specifically caters to this functionality. However, I believe the following approach might just do the trick:

// Declare the module name, similar to the `name` property in `package.json`.
var Classy$Base = require('classy-js/base')
// Followed by another file
var Classy$Module = require('classy-js/module')

In regards to this section:

After running npm link, followed by executing npm link classy-js in a different project (also utilizing Browserify), I encountered some issues.

To address this and align it with the initial suggestion, consider linking classy-js back to itself. For instance, if you have a directory structure like /somedir/subdir/classy-js, ensure there exists a /somedir/subdir/node_modules. Then, navigate to /somedir/subdir and run npm link classy-js. Be cautious not to have a

/somedir/subdir/classy-js/node_modules

and avoid linking from /somedir/subdir/classy-js to prevent any circular references that could disrupt module resolution.

Need Root Directories in Browserify and Using NPM (eliminating the constant use of '../../../..' in both cases)

Answer №1

Answer №2

Similar questions

How to access the api variable in JavaScript

Troubleshooting JQuery Variable Overwriting Problem

The array is not receiving the objects as intended

Error message: Component is unable to access the $store property because it is undefined

In JavaScript, the event.defaultPrevented property will never be set to true

What is the reason for the JavaScript TypeError (undefined) being triggered when this object is used within a function?

The module 'measuretool-googlemaps-v3' could not be located

What is the best way to send information to a component using Props in Vue2?

Change the value of a single element in an array using a component in ReactJS

"Encountered a hiccup while trying to install bcrypt

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

Executing several asynchronous functions in Angular 2

What is the best way to transform HeadersInit into an Object<string,string> data type?

Stop the scrolling behavior from passing from one element to the window

What is the process for including an SVG file in my JavaScript .textContent?

Modify Ripple Color on Material UI < Button /> Click Event

Possible Inconsistencies with the LookAt Feature in Three.js

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

Is it appropriate to include a function within a loop?

Working with conditional statements in ReactJS and Javascript