how to require a module without mentioning the relative file path - javascript

this is an example folder structure
folder1
--lib
----app.js
folder 2
--www
----Application.js
The Application.js file in the folder2 requires app.js file from the folder1 in the following way var app = require('../../folder1/lib/app')
and then Application.js is browserified.
What I want to achive is require the app.js into the Application.js without mentioning the path .ie var app = require('app') and without changing the folder structure, but on being browseried it will map the actual file i.e. folder1/lib/app.js for require('app').
EDIT
I am thinking about creating a file in folder1 that will be responsible to browserify the code in folder2.
Ex: $folder2> node ../folder1/build.js www/Application.js
will output a browserified file mapping require('app') to the app.js in folder1

I tend to use app-module-path for this.
My folder structure:
index.js
app/
lib/
hash.js
controllers/
index.js
middleware/
auth.js
and in index.js:
require('app-module-path').addPath(__dirname);
Then for example in controllers/index.js, I can just do this:
var auth = require('app/middleware/auth');
var hash = require('app/lib/hash');
This is for nodejs. Now for browserify you can use aliasify.
replacements: {
"app/(\\w+)": "app/$1"
}
It makes things much cleaner. 👍

Related

Cannot find module './config.json'

I want to make a module linked to a config.json located outside the node_modules folder. The problem is that my index.js located in modules can't take into account the config.json located outside node_modules, do you have any idea what I should do?
I have tried
let configFile = require('./config.json')
and
let configFile = require('.../config.json')
It is important to first locate where the 'distance' of your index.js file to your config.json file.
Say, for example, if your file tree is like this:
cool-bot / modules / index.js
cool-bot / config.json
You could have your index.js file like this:
let configFile = require('../config.json')
../ will look up to the parent of the parent of your current folder.
./ will look up in the current folder.
Hope this was useful for you.
Okay first of all I have one question. Why? Why would you put your index.js in node_modules?
Anyways, you should check how far the bot config json file is from your index.js, for example:
v RootProjectFolder
⠀⠀config.json
⠀⠀v node_modules
⠀⠀⠀⠀v bot_folder
⠀⠀⠀⠀⠀⠀index.js
config.json's parent folder is RootProjectFolder
index.js is 3 folders away from RootProjectFolder;
RootProjectFolder -> node_modules -> bot_folder -> index.js
so you will need to go 3 folders back:
./ = 1 folder back (folder in which the file is in)
../ = 2 folders back (parent folder of the folder in which the file is in)
../../ = 3 folders back
So in this situation, you would do:
const configFile = require('../../config.json');
I can't give a specific answer based on your situation as I don't know your
project's structure.

TypeScript: list files in web folder

I have a TypeScript web application with the following folder structure.
- assets
|- a.png
|- b.png
|- c.png
|- d.png
|- ...
- app.ts
In app.ts, how do I programatically list all the files in assets folder?
I tried the below but it didn't work. And I also thought I may be going down the wrong path because fs is used to access the user's file system, which is not my intent.
const fs = require('fs');
const assets_folder = './assets/';
fs.readdirSync(assets_folder).forEach((file) => {
console.log(file);
});
The issue is related to file location because when you use the typescript after compiling., it'll move to dist/build and it'll look in that directory.
Solution: Copy files/directory from src to dist/build programatically, it'll solve your issue.
Project src
src
assets
images
app.ts
After complie
dist
//<Missing assets>
app.js

How does project with nested node_modules behave?

We are trying to separate our project into "sub modules" within single repo, but keep things like webpack, express server global, so assume structure like this
package.json
server.js
index.js
node_modules/
public/
index.html
dashboard.js
onboarding.js
dashboard/
index.js
package.json
node_modules/
components/
assets/
onboarding/
index.js
package.json
node_modules/
...
idea here is to keep build / routing / server logic at root lvl and separate modules like dashboard and onboarding into their separate folders and allow them to use their own node modules.
Will this work? Will node modules be included correctly?
webpack will build assets to public/ folder, with some vendor assets and several entry points i.e. all index.js files
What you are proposing will work fine and compile as you expect. NodeJS will initially look for modules included in your modules 'node_modules' sub-directory and then work up the ladder.

How to cache-bust new app builds with Gulp?

I am using Gulp to build a deployable build for an application. I would like to cache-bust all of my .js and .css files so that when a new build is deployed, users will need to retrieve the new "cache-busted" files. For example, if an app.js file is stored in the browser's cache, I would like to have the ref to app.js in my index.html look something like this:
<script src="app/js/app.js?v=1.2"></script>
and so on for all relevant files I would like to cache bust.
Some other questions related to this problem I have:
1) How can I tell that these files are actually getting cache busted properly?
2) Is there a better way to approach this?
Here is what I am trying so far:
//compile index.html, app, vendor
gulp.task('compile-dist', function(){
var revAll = new RevAll();
gulp.src('../../backend-angular-seed/app/**')
.pipe(gulp.dest('../dist/app'));
gulp.src('../../backend-angular-seed/vendor/**')
.pipe(gulp.dest('../dist/vendor'));
gulp.src('../index.html')
.pipe(gulp.dest('../dist/'));
})
This code takes all of the code from my app/ directory (which is a result of my compiled code from my master/ directory) and builds a dist/ directory with all of my js, css, and vendor files.
After this build I have a dist/ directory that looks like this:
/dist
/css
|_app.css
/img
/js
|_ app.js
|_ base.js
/vendor
index.html
I have tried using a few different methods on modifying this dist directory to effectively have it bust the cache. I tried using gulp-cachebust as well as gulp-rev-all, but I believe both of these tools are a bit overkill for what I am trying to do.
Ideally, through Gulp, I would like to go into the index.html file made from the Gulp build, and modify all of my script tags to append the query string of "?v=1.0" on the end of all files I would like to cache bust per deploy build.
Any answers/suggestions would be greatly appreciated. Thanks so much!!!
If appending query string is all you want then i recommend using gulp-cache-bust.
var cachebust = require('gulp-cache-bust');
gulp.src('./dist/index.html')
.pipe(cachebust({
type: 'timestamp'
}))
.pipe(gulp.dest('./dist'));
Here is the turorial for it: https://www.npmjs.com/package/gulp-cache-bust

How to require deep nested NodeJS modules?

I have the following application structure:
application
|- config
|----- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
In /routes/api/router.js module I need to require /config/config.js file and do the following:
require('../../config/config.js');
I found the code above ugly and want to make it more pretty. Also if I move /routes/api/router.js to another folder I have to refactor all requires. What is the best practices to require that modules and is it possible to require config.js from application folder root, something like the following:
require('/config/config.js');
Thanks.
There are a few ways to get around this problem. One is to put all your shared code (like config.js) in a directory under node_modules (using lib here in case you want to have directories other than config in there):
application
|- node_modules
|----- lib
|---------- config
|-------------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
So then you could require config.js using require( 'lib/config/config.js' ).
Alternatively, you could create a lib symlink in node_modules and link it to lib in your application directory structure:
application
|- node_modules
|----- lib -> ../../lib
|- lib
|------ config
|---------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
One other alternative, which unfortunately is discouraged by the node docs, is to use NODE_PATH which lets you specify directories that node's require() algorithm should look into. Following the same pattern as above with lib, you would do:
application
|- lib
|------ config
|---------- config.js
|- routes
|------ api
|-----------router.js
|- Application.js
|- package.json
and set NODE_PATH equal to $path_to_application/lib.
UPDATE
Found this great discussion on the topic which includes the options above as well as a few other ones.
The easiest solution is to use path.resolve. If you only give relative paths to path.resolve then it assumes they are relative to the current working directory, i.e. the project root. So all you need is:
const path = require('path');
path.resolve('config/config.js');
require('/config/config.js');
will not work as you are using the root of the system(os) not the root of the application.
var path=require('path');
var root=path.dirname(process.mainModule.filename);
or
var root=process.cwd();
will give you the root of the application. To navigate to config.js
path.resolve(root,'config/config.js)

Categories

Resources