jspm bundle code in subdirectory that is served as root - jspm

I am trying to create a self-executing bundle of an application, but jspm can't find what it's looking for.
I have the following folder structure
The src directory contains all of the JavaScript, but it is hosted by node as if it were the root. jspm_packages is hosted as if it were inside the root, making normal module import without a path possible (ie import React from 'react')
The app runs just fine, but when I try to build it fails because it doesn't know to look in the src directory and the jspm_packages directory for modules. Is there a way to fix this without changing the folder structure or the root-hosting?
I am ok with moving the system.config.js file into src if that makes this possible)
EDIT
This is easy if you move jspm_packages into src.
in package.json
"jspm": {
"directories": {
"baseURL": "src"
},
"configFile": "src/system.config.js"
}
This will put both system.config.js and jspm_packages in src (don't use a baseUrl in system.config.js), and bundling will work. The major drawback here is the src folder no longer contains only the project code; it now also contains library code. Performing folder searches becomes harder, and I just prefer the idea of a folder with all of my code in it.
EDIT2
After thinking about this problem more, I guess what I am really after is a method to specify an alternate path configuration during bundling. Based on my reading of the docs, this appears to be unsupported.

You can set your baseUrl to be the root (i.e. "/") and then set the path for your source code on the paths property like this:
System.config({
baseURL: "/",
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
}
})
Full working example can be seen here.
Furthermore, if you need to change you paths just for bundling you could use the jspm-cli in a gulp task and override your builder configuration like this:
var jspm = require('jspm');
gulp.task('task', function () {
var builder = new jspm.Builder();
builder.loadConfigSync('pathToYourConfigFile');
builder.config({
paths: {
'*': 'pathToYourCode'
}
});
builder.bundle('yourOptionsHere');
}

Related

Eleventy programmatic API - what should the input path look like?

I have a aws lambda function which calls the eleventy.write() or eleventy.toJSON() method but can't seem to make it work. I have tried different project structures and setting different paths but it either returns an empty array or it throws the following error
TemplateLayoutPathResolver directory does not exist for filename.njk: _includes
When I run the eleventy command from terminal, it builds successfully.
This is my 11ty project structure
project root folder
-- public (output of the eleventy build)
-- .eleventy.js
-- src (input for the eleventy build)
|-- _data
|-- _includes
my .eleventy.js file looks like this:
...
return {
dir:{
input: 'src',
output: 'public',
},
};
On the lambda function project, where the write() call is made, I have tried setting the input path relative to the file, then I tried putting the 11ty root folder next to the .js file and instantiating eleventy like let eleventy = new Eleventy(".", "public") which didn't worked and I also tried taking the content of the eleventy root project and placing it next to the .js file I am making the write() call.
Also tried setting the configPath like so
let eleventy = new Eleventy(".", "public", {
configPath: "./.eleventy.js",
});
but still not working.
The documentation for the eleventy programmatic API (https://www.11ty.dev/docs/programmatic/) is pretty thin, so any help will be greatly appreciated.
Looking at your list of files above, in src, I see includes, not _includes. Did you forget the underscore?
Just set your input folder to "src"
let eleventy = new Eleventy("src", "public");

Symlink node_modules for files outside src

In my project I use a JSON file as a database (which is currently stored in local on my computer). It is modified by Node.js and some pieces of information are rendered with React in an import : import Data from 'myPath/appData.json';
I cannot have my database in the src folder because the build is static, and my databse must be dynamic.
I get this error :
Failed to compile.
./src/components/Ligne1.jsx
Module not found: You attempted to import myPath/appData.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
I am now asking your help on how to add the symlink. I created the folder "appData" in node_modules with :
const fs=require('fs');
fs.symlink('.src/','.node_modules/app/',e=>{});
import Data from 'myPath/appData.json';
And using it in my component like :
import Data from 'appData';
but I also get the error :
Failed to compile.
export 'default' (imported as 'Data') was not found in 'appData'
I'm looking for a solution to ignore the restriction of the import outside src folder (symlink or something else : I already tried to change the configs of webpack but it didn't change anything) or another solution to get the information from my JSON file (which is currently stored in local on my computer).
Thank you for your time.
This restriction makes sure all files or modules (exports) are inside src/ directory, the implementation is in ./node_modules/react-dev-utils/ModuleScopePlugin.js, in following lines of code.
// Resolve the issuer from our appSrc and make sure it's one of our files
// Maybe an indexOf === 0 would be better?
const relative = path.relative(appSrc, request.context.issuer);
// If it's not in src/ or a subdirectory, not our request!
if (relative.startsWith('../') || relative.startsWith('..\\')) {
return callback();
}
You can remove this restriction by
either changing this piece of code (not recommended)
or do eject then remove ModuleScopePlugin.js from the directory.
or comment/remove const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); from ./node_modules/react-scripts/config/webpack.config.dev.js
PS: beware of the consequences of eject.

Is there a way to automatically copy files to wwwroot?

I have my index.html in the directory called wwwroot and it's being accessed from the browser on locahost:5001. Whe nI installed some packages using NPM, the directory node_modules was placed on the same level as wwwroot.
When I'm linking to the files, I use a relative path like this.
href="../node_modules/package_this_or_that/package.min.js"
It seems to me that a better approach would be to have those delivered to the wwwroot directory and have them reside there. Not all the contents of the packages, just the files that are actually being used (skipping readmes etc.).
Is there a package for that? Or is it something that needs to be done using a build script?
This answer recommends using GULP which seems dated now.
You are not supposed to access node_modules files from front-end like your html or cshtml files. So you are right you should copy them to the wwwroot folder.
You can use grunt as linked in Tseng comment but I personally prefer Gulp, I think it's much quicker and easier to use.
Your package.json file:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"gulp": "3.9.1",
"gulp-cached": "1.1.0",
}
}
Then create a gulpfile.js at your project's root level and you can write something like
var gulp = require('gulp'),
cache = require('gulp-cached'); //If cached version identical to current file then it doesn't pass it downstream so this file won't be copied
gulp.task('default', 'copy-node_modules');
gulp.task('copy-node_modules', function () {
try {
gulp.src('node_modules/**')
.pipe(cache('node_modules'))
.pipe(gulp.dest('wwwroot/node_modules'));
}
catch (e) {
return -1;
}
return 0;
});
Finally open the Task Runner Explorer (if you are using Visual Studio) and execute either your default task or directly the copy-node_modules task.
Gulp is very useful, I suggest you explore other different gulp tasks. You can concat and minify both CSS and JS files, remove comments, you can even create a watch task that executes other tasks as soon as a file changes.

Incorrect path for generated coffee sourcemaps when serving with nodejs

I'm using coffeescript to do some work. The coffeescript is compiled to js with grunt and served with a simple nodejs express app.
My folder structure does follow the common one with a assets folder for things to be compiled (coffeescript, stylus) and public folder with the compiled stuff (js, css):
/
-- assets /
-- coffee /
-- lib /
-- util.coffee
-- main.coffee
-- styl
-- public /
-- css
-- js /
-- lib /
-- util.js
-- main.js
My coffee setup in grunt is:
coffee:
client:
options:
sourceMap: true
#sourceRoot: '??'
files: [
expand: true
cwd: 'assets/coffee/'
src: ['**/*.coffee']
dest: 'public/js/'
ext: '.js'
]
To serve files from the assets dir I added this to be a static directory in my express app:
app.use express.static(process.cwd() + '/assets')
Chrome correctly recognizes that the are source maps but the location to the coffee files are wrong. For example a url looks like http://localhost:3000/assets/coffee/main.coffee. Of course this results in a 404 because assets is the root for all coffee files and is served by my express app.
So I need to adjust the sourceRoot variable.
If I set sourceRoot to sourceRoot: '/assets/', Chrome generates links to http://localhost:3000/assets/main.coffee.
If I set it to sourceRoot: '/coffee/' the link is http://localhost:3000/coffee/main.coffee. This works for files in assets/coffee/. Files in a subdirectory of assets/coffee/ like assets/coffee/lib/ aren't found (the generated link is http://localhost:3000/coffee/util.coffee)
Setting the sourceRoot option seems to remove the folder structure?!
Long question short: What's the correct setting for sourceRoot? How can I preserve the folder structure?
I filed this issue as a possible bug report: https://github.com/jashkenas/coffee-script/issues/3075
This appears to actually be a bug in the CoffeeScript Grunt task.
See: https://github.com/gruntjs/grunt-contrib-coffee/blob/master/tasks/coffee.js#L87
options = _.extend({
generatedFile: path.basename(paths.dest),
sourceRoot: mapOptions.sourceRoot,
sourceFiles: mapOptions.sourceFiles
}, options);
Here, if the options object has a "sourceRoot" element, it will override the generated sourceRoot which is created by this function:
https://github.com/gruntjs/grunt-contrib-coffee/blob/master/tasks/coffee.js#L130
var createOptionsForFile = function (file, paths) {
return {
code: grunt.file.read(file),
sourceFiles: [path.basename(file)],
sourceRoot: appendTrailingSlash(path.relative(paths.destDir, path.dirname(file)))
};
};
Which uses the relative path from the destination directory to where the source file is (which would probably work if you mapped things like /js to /public/js instead, but for you there will be an extra ../ in the path).
For your case, it might work if you modified the code so that you replaced the options = _.extend({... code with something like:
var newRoot = undefined
if (options.sourceRoot) newRoot = appendTrailingSlash(path.join(options.sourceRoot, path.dirname(file)));
options = _.extend({
generatedFile: path.basename(paths.dest),
sourceRoot: mapOptions.sourceRoot,
sourceFiles: mapOptions.sourceFiles
}, options);
if (newRoot) options.sourceRoot = newRoot;
I think that will work because file should be relative to your cwd setting.
If that change to the Grunt task works, it would be worth making a cleaner version and submitting a pull request, because I think if your .coffee files are in a directory tree, that should be reflected in your sourcemaps' sourceRoot property.

How to make node.js require absolute? (instead of relative)

I would like to 'require' my files always by the root of my project and not relative to the current module.
For example, if you look at Express.js' app.js line 6, you will see
express = require('../../')
That's really bad, IMO. Imagine I would like to put all my examples closer to the root only by one level. That would be impossible, because I would have to update more than 30 examples and many times within each example. To this:
express = require('../')
My solution would be to have a special case for root based: if a string starts with an $ then it's relative to the root folder of the project.
What can I do?
Update 2
Now I'm using RequireJS which allows you to write in one way and works both on client and on server. RequireJS also allows you to create custom paths.
Update 3
Now I moved to Webpack and Gulp.js and I use enhanced-require to handle modules on the server side. See here for the rationale: http://hackhat.com/p/110/module-loader-webpack-vs-requirejs-vs-browserify/
Use:
var myModule = require.main.require('./path/to/module');
It requires the file as if it were required from the main JavaScript file, so it works pretty well as long as your main JavaScript file is at the root of your project... and that's something I appreciate.
There's a really interesting section in the Browserify Handbook:
avoiding ../../../../../../..
Not everything in an application properly belongs on the public npm
and the overhead of setting up a private npm or git repo is still
rather large in many cases. Here are some approaches for avoiding the
../../../../../../../ relative paths problem.
node_modules
People sometimes object to putting application-specific modules into
node_modules because it is not obvious how to check in your internal
modules without also checking in third-party modules from npm.
The answer is quite simple! If you have a .gitignore file that
ignores node_modules:
node_modules
You can just add an exception with ! for each of your internal
application modules:
node_modules/*
!node_modules/foo
!node_modules/bar
Please note that you can't unignore a subdirectory, if the parent is
already ignored. So instead of ignoring node_modules, you have to
ignore every directory inside node_modules with the
node_modules/* trick, and then you can add your exceptions.
Now anywhere in your application you will be able to require('foo')
or require('bar') without having a very large and fragile relative
path.
If you have a lot of modules and want to keep them more separate from
the third-party modules installed by npm, you can just put them all
under a directory in node_modules such as node_modules/app:
node_modules/app/foo
node_modules/app/bar
Now you will be able to require('app/foo') or require('app/bar')
from anywhere in your application.
In your .gitignore, just add an exception for node_modules/app:
node_modules/*
!node_modules/app
If your application had transforms configured in package.json, you'll
need to create a separate package.json with its own transform field in
your node_modules/foo or node_modules/app/foo component directory
because transforms don't apply across module boundaries. This will
make your modules more robust against configuration changes in your
application and it will be easier to independently reuse the packages
outside of your application.
symlink
Another handy trick if you are working on an application where you can
make symlinks and don't need to support windows is to symlink a lib/
or app/ folder into node_modules. From the project root, do:
ln -s ../lib node_modules/app
and now from anywhere in your project you'll be able to require files
in lib/ by doing require('app/foo.js') to get lib/foo.js.
custom paths
You might see some places talk about using the $NODE_PATH
environment variable or opts.paths to add directories for node and
browserify to look in to find modules.
Unlike most other platforms, using a shell-style array of path
directories with $NODE_PATH is not as favorable in node compared to
making effective use of the node_modules directory.
This is because your application is more tightly coupled to a runtime
environment configuration so there are more moving parts and your
application will only work when your environment is setup correctly.
node and browserify both support but discourage the use of
$NODE_PATH.
I like to make a new node_modules folder for shared code. Then let Node.js and 'require' do what they do best.
For example:
- node_modules // => these are loaded from your *package.json* file
- app
- node_modules // => add node-style modules
- helper.js
- models
- user
- car
- package.json
- .gitignore
For example, if you're in car/index.js you can require('helper') and Node.js will find it!
How node_modules Work
Node.js has a clever algorithm for resolving modules that is unique among rival platforms.
If you require('./foo.js') from /beep/boop/bar.js, Node.js will look for ./foo.js in /beep/boop/foo.js. Paths that start with a ./ or ../ are always local to the file that calls require().
If, however, you 'require' a non-relative name such as require('xyz') from /beep/boop/foo.js, Node.js searches these paths in order, stopping at the first match and raising an error if nothing is found:
/beep/boop/node_modules/xyz
/beep/node_modules/xyz
/node_modules/xyz
For each xyz directory that exists, Node.js will first look for a xyz/package.json to see if a "main" field exists. The "main" field defines which file should take charge if you require() the directory path.
For example, if /beep/node_modules/xyz is the first match and /beep/node_modules/xyz/package.json has:
{
"name": "xyz",
"version": "1.2.3",
"main": "lib/abc.js"
}
then the exports from /beep/node_modules/xyz/lib/abc.js will be returned by require('xyz').
If there is no package.json or no "main" field, index.js is assumed:
/beep/node_modules/xyz/index.js
The big picture
It seems "really bad" but give it time. It is, in fact, really good. The explicit require()s give a total transparency and ease of understanding that is like a breath of fresh air during a project life cycle.
Think of it this way: You are reading an example, dipping your toes into Node.js and you've decided it is "really bad IMO." You are second-guessing leaders of the Node.js community, people who have logged more hours writing and maintaining Node.js applications than anyone. What is the chance the author made such a rookie mistake? (And I agree, from my Ruby and Python background, it seems at first like a disaster.)
There is a lot of hype and counter-hype surrounding Node.js. But when the dust settles, we will acknowledge that explicit modules and "local first" packages were a major driver of adoption.
The common case
Of course, node_modules from the current directory, then the parent, then grandparent, great-grandparent, etc. is searched. So packages you have installed already work this way. Usually you can require("express") from anywhere in your project and it works fine.
If you find yourself loading common files from the root of your project (perhaps because they are common utility functions), then that is a big clue that it's time to make a package. Packages are very simple: move your files into node_modules/ and put a package.json
there. Voila! Everything in that namespace is accessible from your entire project. Packages are the correct way to get your code into a global namespace.
Other workarounds
I personally don't use these techniques, but they do answer your question, and of course you know your own situation better than I.
You can set $NODE_PATH to your project root. That directory will be searched when you require().
Next, you could compromise and require a common, local file from all your examples. That common file simply re-exports the true file in the grandparent directory.
examples/downloads/app.js (and many others like it)
var express = require('./express')
examples/downloads/express.js
module.exports = require('../../')
Now when you relocate those files, the worst-case is fixing the one shim module.
If you are using yarn instead of npm you can use workspaces.
Let's say I have a folder services I wish to require more easily:
.
├── app.js
├── node_modules
├── test
├── services
│   ├── foo
│   └── bar
└── package.json
To create a Yarn workspace, create a package.json file inside the services folder:
{
"name": "myservices",
"version": "1.0.0"
}
In your main package.json add:
"private": true,
"workspaces": ["myservices"]
Run yarn install from the root of the project.
Then, anywhere in your code, you can do:
const { myFunc } = require('myservices/foo')
instead of something like:
const { myFunc } = require('../../../../../../services/foo')
Have a look at node-rfr.
It's as simple as this:
var rfr = require('rfr');
var myModule = rfr('projectSubDir/myModule');
I use process.cwd() in my projects. For example:
var Foo = require(process.cwd() + '/common/foo.js');
It might be worth noting that this will result in requireing an absolute path, though I have yet to run into issues with this.
IMHO, the easiest way is to define your own function as part of GLOBAL object.
Create projRequire.js in the root of you project with the following contents:
var projectDir = __dirname;
module.exports = GLOBAL.projRequire = function(module) {
return require(projectDir + module);
}
In your main file before requireing any of project-specific modules:
// init projRequire
require('./projRequire');
After that following works for me:
// main file
projRequire('/lib/lol');
// index.js at projectDir/lib/lol/index.js
console.log('Ok');
#Totty, I've comed up with another solution, which could work for case you described in comments. Description gonna be tl;dr, so I better show a picture with structure of my test project.
There's a good discussion of this issue here.
I ran into the same architectural problem: wanting a way of giving my application more organization and internal namespaces, without:
mixing application modules with external dependencies or bothering with private npm repos for application-specific code
using relative requires, which make refactoring and comprehension harder
using symlinks or changing the node path, which can obscure source locations and don't play nicely with source control
In the end, I decided to organize my code using file naming conventions rather than directories. A structure would look something like:
npm-shrinkwrap.json
package.json
node_modules
...
src
app.js
app.config.js
app.models.bar.js
app.models.foo.js
app.web.js
app.web.routes.js
...
Then in code:
var app_config = require('./app.config');
var app_models_foo = require('./app.models.foo');
or just
var config = require('./app.config');
var foo = require('./app.models.foo');
and external dependencies are available from node_modules as usual:
var express = require('express');
In this way, all application code is hierarchically organized into modules and available to all other code relative to the application root.
The main disadvantage is of course that in a file browser, you can't expand/collapse the tree as though it was actually organized into directories. But I like that it's very explicit about where all code is coming from, and it doesn't use any 'magic'.
Assuming your project root is the current working directory, this should work:
// require built-in path module
path = require('path');
// require file relative to current working directory
config = require( path.resolve('.','config.js') );
I have tried many of these solutions. I ended up adding this to the top of my main file (e.g. index.js):
process.env.NODE_PATH = __dirname;
require('module').Module._initPaths();
This adds the project root to the NODE_PATH when the script is loaded. The allows me to require any file in my project by referencing its relative path from the project root such as var User = require('models/user'). This solution should work as long as you are running a main script in the project root before running anything else in your project.
Some of the answers is saying that the best way is to add the code to the node_module as a package, i agree and its probably the best way to lose the ../../../ in require but none of them actually give a way to do so.
from version 2.0.0 you can install a package from local files, which means you can create folder in your root with all the packages you want,
-modules
--foo
--bar
-app.js
-package.json
so in package.json you can add the modules (or foo and bar) as a package without publishing or using external server like this:
{
"name": "baz",
"dependencies": {
"bar": "file: ./modules/bar",
"foo": "file: ./modules/foo"
}
}
After that you do npm install, and you can access the code with var foo = require("foo"), just like you do with all the other packages.
more info can be found here :
https://docs.npmjs.com/files/package.json#local-paths
and here how to create a package :
https://docs.npmjs.com/getting-started/creating-node-modules
You could use a module I made, Undot. It is nothing advanced, just a helper so you can avoid those dot hell with simplicity.
Example:
var undot = require('undot');
var User = undot('models/user');
var config = undot('config');
var test = undot('test/api/user/auth');
Another answer :
Imagine this folders structure :
node_modules
lodash
src
subdir
foo.js
bar.js
main.js
tests
test.js
Then in test.js, you need to require files like this :
const foo = require("../src/subdir/foo");
const bar = require("../src/subdir/bar");
const main = require("../src/main");
const _ = require("lodash");
and in main.js :
const foo = require("./subdir/foo");
const bar = require("./subdir/bar");
const _ = require("lodash");
Now you can use babel and the babel-plugin-module-resolver with this .babelrc file to configure 2 root folders:
{
"plugins": [
["module-resolver", {
"root": ["./src", "./src/subdir"]
}]
]
}
Now you can require files in the same manner in tests and in src:
const foo = require("foo");
const bar = require("bar");
const main = require("main");
const _ = require("lodash");
and if you want use the es6 module syntax:
{
"plugins": [
["module-resolver", {
"root": ["./src", "./src/subdir"]
}],
"transform-es2015-modules-commonjs"
]
}
then you import files in tests and src like this :
import foo from "foo"
import bar from "bar"
import _ from "lodash"
You could define something like this in your app.js:
requireFromRoot = (function(root) {
return function(resource) {
return require(root+"/"+resource);
}
})(__dirname);
and then anytime you want to require something from the root, no matter where you are, you just use requireFromRoot instead of the vanilla require. Works pretty well for me so far.
Imho the easiest way to achieve this is by creating a symbolic link on app startup at node_modules/app (or whatever you call it) which points to ../app. Then you can just call require("app/my/module"). Symbolic links are available on all major platforms.
However, you should still split your stuff in smaller, maintainable modules which are installed via npm. You can also install your private modules via git-url, so there is no reason to have one, monolithic app-directory.
In your own project you could modify any .js file that is used in the root directory and add its path to a property of the process.env variable. For example:
// in index.js
process.env.root = __dirname;
Afterwards you can access the property everywhere:
// in app.js
express = require(process.env.root);
Manual Symlinks (and Windows Junctions)
Couldn't the examples directory contain a node_modules with a symbolic link to the root of the project project -> ../../ thus allowing the examples to use require('project'), although this doesn't remove the mapping, it does allow the source to use require('project') rather than require('../../').
I have tested this, and it does work with v0.6.18.
Listing of project directory:
$ ls -lR project
project:
drwxr-xr-x 3 user user 4096 2012-06-02 03:51 examples
-rw-r--r-- 1 user user 49 2012-06-02 03:51 index.js
project/examples:
drwxr-xr-x 2 user user 4096 2012-06-02 03:50 node_modules
-rw-r--r-- 1 user user 20 2012-06-02 03:51 test.js
project/examples/node_modules:
lrwxrwxrwx 1 user user 6 2012-06-02 03:50 project -> ../../
The contents of index.js assigns a value to a property of the exports object and invokes console.log with a message that states it was required. The contents of test.js is require('project').
Automated Symlinks
The problem with manually creating symlinks is that every time you npm ci, you lose the symlink. If you make the symlink process a dependency, viola, no problems.
The module basetag is a postinstall script that creates a symlink (or Windows junction) named $ every time npm install or npm ci is run:
npm install --save basetag
node_modules/$ -> ..
With that, you don't need any special modification to your code or require system. $ becomes the root from which you can require.
var foo = require('$/lib/foo.js');
If you don't like the use of $ and would prefer # or something else (except #, which is a special character for npm), you could fork it and make the change.
Note: Although Windows symlinks (to files) require admin permissions, Windows junctions (to directories) do not need Windows admin permissions. This is a safe, reliable, cross-platform solution.
Here is the actual way I'm doing for more than 6 months. I use a folder named node_modules as my root folder in the project, in this way it will always look for that folder from everywhere I call an absolute require:
node_modules
myProject
index.js I can require("myProject/someFolder/hey.js") instead of require("./someFolder/hey.js")
someFolder which contains hey.js
This is more useful when you are nested into folders and it's a lot less work to change a file location if is set in absolute way. I only use 2 the relative require in my whole app.
Just came across this article which mentions app-module-path. It allows you to configure a base like this:
require('app-module-path').addPath(baseDir);
I was looking for the exact same simplicity to require files from any level and I found module-alias.
Just install:
npm i --save module-alias
Open your package.json file, here you can add aliases for your paths, for e.g.
"_moduleAliases": {
"#root" : ".", // Application's root
"#deep" : "src/some/very/deep/directory/or/file",
"#my_module" : "lib/some-file.js",
"something" : "src/foo", // Or without #. Actually, it could be any string
}
And use your aliases by simply:
require('module-alias/register')
const deep = require('#deep')
const module = require('something')
If anyone's looking for yet another way to get around this problem, here's my own contribution to the effort:
https://www.npmjs.com/package/use-import
The basic idea: you create a JSON file in the root of the project that maps your filepaths to shorthand names (or get use-automapper to do it for you). You can then request your files/modules using those names. Like so:
var use = require('use-import');
var MyClass = use('MyClass');
So there's that.
I wrote this small package that lets you require packages by their relative path from project root, without introducing any global variables or overriding node defaults
https://github.com/Gaafar/pkg-require
It works like this
// create an instance that will find the nearest parent dir containing package.json from your __dirname
const pkgRequire = require('pkg-require')(__dirname);
// require a file relative to the your package.json directory
const foo = pkgRequire('foo/foo')
// get the absolute path for a file
const absolutePathToFoo = pkgRequire.resolve('foo/foo')
// get the absolute path to your root directory
const packageRootPath = pkgRequire.root()
Just want to follow up on the great answer from Paolo Moretti and Browserify. If you are using a transpiler (e.g., babel, typescript) and you have separate folders for source and transpiled code like src/ and dist/, you could use a variation of the solutions as
node_modules
With the following directory structure:
app
node_modules
... // normal npm dependencies for app
src
node_modules
app
... // source code
dist
node_modules
app
... // transpiled code
you can then let babel etc to transpile src directory to dist directory.
symlink
Using symlink we can get rid some levels of nesting:
app
node_modules
... // normal npm dependencies for app
src
node_modules
app // symlinks to '..'
... // source code
dist
node_modules
app // symlinks to '..'
... // transpiled code
A caveat with babel --copy-files The --copy-files flag of babel does not deal with symlinks well. It may keep navigating into the .. symlink and recusively seeing endless files. A workaround is to use the following directory structure:
app
node_modules
app // symlink to '../src'
... // normal npm dependencies for app
src
... // source code
dist
node_modules
app // symlinks to '..'
... // transpiled code
In this way, code under src will still have app resolved to src, whereas babel would not see symlinks anymore.
I had the same problem many times. This can be solved by using the basetag npm package. It doesn't have to be required itself, only installed as it creates a symlink inside node_modules to your base path.
const localFile = require('$/local/file')
// instead of
const localFile = require('../../local/file')
Using the $/... prefix will always reference files relative to your apps root directory.
Source: How I created basetag to solve this problem
What I like to do is leverage how Node.js loads from the node_modules directory for this.
If one tries to load the module "thing", one would do something like
require('thing');
Node.js will then look for the 'thing' directory in the 'node_modules' directory.
Since the node_modules folder is normally at the root of the project, we can leverage this consistency. (If node_modules is not at the root, then you have other self-induced headaches to deal with.)
If we go into the directory and then back out of it, we can get a consistent path to the root of the Node.js project.
require('thing/../../');
Then if we want to access the /happy directory, we would do this:
require('thing/../../happy');
Though it is quite a bit hacky, however I feel if the functionality of how node_modules load changes, there will be bigger problems to deal with. This behavior should remain consistent.
To make things clear, I do this, because the name of module does not matter.
require('root/../../happy');
I used it recently for Angular 2. I want to load a service from the root.
import {MyService} from 'root/../../app/services/http/my.service';
If your app's entry point js file (i.e. the one you actually run "node" on) is in your project root directory, you can do this really easily with the rootpath npm module. Simply install it via
npm install --save rootpath
...then at the very top of the entry point js file, add:
require('rootpath')();
From that point forward all require calls are now relative to project root - e.g. require('../../../config/debugging/log'); becomes require('config/debugging/log'); (where the config folder is in the project root).
If you're using ES5 syntax you may use asapp. For ES6 you may use babel-plugin-module-resolver using a config file like this:
.babelrc
{
"plugins": [
["module-resolver", {
"root": ["./"],
"alias": {
"app": "./app",
"config": "./app/config",
"schema": "./app/db/schemas",
"model": "./app/db/models",
"controller": "./app/http/controllers",
"middleware": "./app/http/middleware",
"route": "./app/http/routes",
"locale": "./app/locales",
"log": "./app/logs",
"library": "./app/utilities/libraries",
"helper": "./app/utilities/helpers",
"view": "./app/views"
}
}]
]
}
I created a node module called rekuire.
It allows you to 'require' without the use of relative paths.
It is super easy to use.
We are about to try a new way to tackle this problem.
Taking examples from other known projects like Spring Framework and Guice, we will define a "context" object which will contain all the "require" statement.
This object will then be passed to all other modules for use.
For example,
var context = {}
context.module1 = require("./module1")( { "context" : context } )
context.module2 = require("./module2")( { "context" : context } )
This requires us to write each module as a function that receives opts, which looks to us as a best practice anyway...
module.exports = function(context){ ... }
And then you will refer to the context instead of requiring stuff.
var module1Ref = context.moduel1;
If you want to, you can easily write a loop to do the 'require' statements
var context = {};
var beans = {"module1" : "./module1","module2" : "./module2" };
for ( var i in beans ){
if ( beans.hasOwnProperty(i)){
context[i] = require(beans[i])(context);
}
};
This should make life easier when you want to mock (tests) and also solves your problem along the way while making your code reusable as a package.
You can also reuse the context initialization code by separating the beans declaration from it.
For example, your main.js file could look like so
var beans = { ... }; // like before
var context = require("context")(beans); // This example assumes context is a node_module since it is reused..
This method also applies to external libraries, and there isn't any need to hard code their names every time we require them. However, it will require a special treatment as their exports are not functions that expect context...
Later on, we can also define beans as functions—which will allow us to require different modules according to the environment—but that it out of this question's scope.

Resources