I'm using ReactNative and I have package.json in my local directories so I can have easier imports.
Example:
I have src/components folder and I want to import all components as :
import Button from 'components/Button;
and not use relative path as
import Button from '../../../components/Button;
I created package.json file in my components folder with name 'components' and now I can access Button component as needed.
But, there is problem with PhpStorm. PhpStorm doesn't recognize this as valid path. Is there any workaround for this?
This React native hack for specifying absolute paths (not officially documented anywhere, as far as I can tell) had never been supported. If you miss this feature, please follow WEB-23221 for updates. You can try creating a dummy webpack config like it's suggested in https://youtrack.jetbrains.com/issue/WEB-23221#focus=streamItem-27-2719626.0-0 and specifying a path to it in Settings | Languages & Frameworks | JavaScript | Webpack as a workaround.
Another workaround (if you aren't renaming paths, just making it shorter) is marking a parent folder of components directory as Resource root (note: not the subdirectory itself, but its parent dir!)
Related
I'm write a node.js application.
this application depend on another package, assume AAA..
so in "dependencies" of package.json should include it (above AAA)
my problem is:
i want to check if user has installed AAA and use it, otherwise use AAA which my application install.
pseudolanguage：
import AAA as myAAA from 'AAA';
let fallback
if (user has been installed AAA){
fallback = AAA;
} else {
fallback = myAAA;
}
can i do that?
In short, no, what you are trying to do can not be done in a simple manner. The order by which Node.js tries to locate a module referred by name is as follows :
Check to see if the given module is a core module.
Search for a directory named node_modules in the current directory
(project directory).
Work the way up the folder hierarchy, checking each level for a
node_modules folder.
Look at the directory paths outlined in the require.paths array in
node.
You cant make Node.JS change the order of this lookup - which is what you are trying to do.
There can be other ways to achieve this - for example, look for the global node_modules install location and see if the package is in that folder - if so, you can require() the absolute path to the global package, if not, you can require() the package as usual, and the local package will be used.
Reference:
http://www.bennadel.com/blog/2169-where-does-node-js-and-require-look-for-modules.htm
I am using WebStorm 2017.3 for Node.JS development, and I have a question about source roots.
I use app-module-path to reduce the number of relative paths between my files in require statements, to get rid of stuff like require('../../../utils/common/stuff'). What I do is, on the first line of my app I call
require('app-module-path').addPath(__dirname);
Which makes it possible to do things like require('src/utils/common/stuff'), if the src folder is located directly under the path added to app-module-path.
However, when using these custom source roots, while the code itself works, WebStorm seems unable to resolve the required files. Let's say I have this structure:
app.js
node_modules
|- some_module
|- xyz.js
src
|- routes
|- foo.js
|- bar.js
|- utils
|- stuff.js
WebStorm can of course successfully resolve the following "normal" require statements from foo.js:
require('./bar')
require('../utils/stuff')
require('some_module/xyz')
The first two are of course relative, the last one is because node_modules is a source root (or whatever term is used).
If I now add the root path to app-module-path, all my files can successfully do:
require('src/utils/stuff')
...which I think looks much nicer than endless relative ../../../../ everywhere. However, while the code itself works fine since src/utils/stuff is found relative to the root folder, the file is not resolved by the IDE, meaning my required object/function becomes grey instead of purple/yellow, I cannot Ctrl+Click on any symbols within it or use any other IDE nice stuff, which is very annoying.
I've tried marking directories as "Resource roots", but that doesn't make any difference; files required with absolute paths still cannot be resolved relative to resource roots. Basically what I'm after is the ability to configure additional folders to behave just like node_modules, and in the Directories setting, node_modules is marked as "Excluded", so it surely must be a completely separate setting controlling which folders are used as "require root folders" or "require search paths".
I've also tried making a symlink from <root>/node_modules/src to <root>/src, and while that makes it possible to Ctrl+Click on the actual file path 'src/utils/stuff' in the require statement, it still doesn't resolve the object that was required, and it also causes WebStorm to issue a warning about the module not being listed in package.json (which, of course, is correct).
Is there any way to configure WebStorm with additional "require root folders"? Or is there a better way than app-module-path to get rid of "relative path hell" in require statements while still preserving WebStorm resolving/indexing capabilities?
Is there a variable (or how to make such a variable) that refers to the package base directory (where package.json is)?
The use case:
I am using Babel to compile code from ES6 to ES5. ./src/ to ./dist/. Then I refer to the ./dist/ code in the main property of the package.json
The problem happens when ./src/ code uses files that are not JS, e.g. ./src/schemas/*.json. These files do not exist in ./dist/ folder. Therefore, when referring to non-JavaScript files from ./src/ I need to use a path that keeps a reference to ./src/ file.
I can already do this using ./../src/schemas/foo.json when requesting a file. Though, thats a fragile approach.
I know I can simply copy all the non-JavaScript files to ./dist/, but
duplication of content does not seem like an appropriate solution.
This is the appropriate solution.
Why ?
Your src folder should hold the source code of your project (not including dependencies & build routines)
Your dist folder is supposed to hold a standalone version of your app or website that you'll be able to distribute "as is" (you should be able to upload the content of dist via ssh/ftp or whatever to your remote server and it should be working)
Note: This thread is more about code organization than code itself (so anybody can have his opinion), but this is the kind of workflow yeoman and lots of build systems use.
I am trying to figure out how I can accomplish the following using brunch. This is the current directory structure for our app:
--app
--base (theme folder, considered the master for all themes)
--sass
--js
--theme2
--sass
--js
--theme3
--sass
--js
...so on
The base folder serves as a master for all other themes. However, if another theme has a file in the sass directory or js directory that matches one in the base folder it overrides that file in the base folder (this applies for imports as well).
I have so far created this which works the way it needs to but it circumvents the brunch pipeline in that I write out the files (doesn't currently support file concatenation) and I would prefer to do this using the proper brunch pipline.
What happens is that each sass or js file it encounters in the base folder is used to generate a new file for another theme. E.g say the base theme has a file called main.scss. The path passed to compile is base/scss/main.scss. Now I want to use this same file for the other themes so I get all the theme folders and dynamically use this base main.scss file for each of the other themes. However, I also alter the inner imports to substitute files imports if they exist in the other themes directory. Its not the same file being spat into multiple locations.
The problem is that I want to dynamically generate new CSS files for brunch to render to different folders not related to the original path passed in (and thus the joinTo config option for this path). By calling the callback, it automatically uses the original path parameter passed to the compile method.
Use overrides in your brunch-config to change your joinTos to include base plus the given theme. You can also customize the build output directory or anything else for each theme if that helps. Then run each build separately using a command like brunch build --env theme1.
I am looking at some code on github.
https://github.com/madhums/node-express-mongoose/blob/master/config/routes.js
On line 7 it says.
var home = require('home');
home.js is in another folder. I am wondering how this works, and how I can do this in my own code.
on
http://nodejs.org/api/modules.html#modules_folders_as_modules
it explains how to create a self-contained directory, but I can only find the package.json in the root folder. So how does this work?
It seems like a more clean way than having direct file references.
There are ways to refer to folders on the filesystem as packages in node, npm link for example, will pretend a folder is a module using symlinks.
The package you linked to is cheating a bit though, and I'd argue it's not clean at all when put like that. It's actually setting the NODE_PATH to include all controllers when the service is ran: https://github.com/madhums/node-express-mongoose/blob/master/package.json#L13
So all controllers files like home.js are autmatically available. The .js is always optional anyway.