Would like to use imports by using absolute/dynamic paths, like
import { GlobalVars } from "utils/GlobalVars.js";
but not like
import { GlobalVars } from "../../utils/GlobalVars.js";
With the help of below code snippet able to follow absolute/dynamic path facility in react
jsconfig.json (Which is created at root level of the project)
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
with the same code snippet unable to use absolute paths in NodeJs.
Do we have any other approach to use absolute paths in NodeJs or am i doing any mistake
Related
I have a react ts project where I installed a pure js module: crypto-prices. Considering this module doesn't have any #types source, I created a decs.d.ts file with:
declare module "crypto-prices"
This removes the IDE issue. Yet, when I try to use the cryptoPrice modules through
import cryptoPrice from 'crypto-prices'
I get the following error:
Can't resolve 'crypto-prices' in ...
Import it like this,
import * as cryptoPrice from 'crypto-prices'
You need to include decs.d.ts in tsconfig.json. If decs.d.ts is in the same folder as tsconfig.json it should look something like below:
tsconfig.json
{
"include": [
"./src/**/*",
"./decs.d.ts"
],
"compilerOptions": {
...
}
}
I have this on a TypeScript project, it's a nice config option on tsconfig.json that lets me create aliases for the folders
{
"compilerOptions": {
"paths": {
"#src/*": ["src/*"],
"#images/*": ["src/assets/images/*"],
"#styles/*": ["src/assets/styles/*"],
"#components": ["src/components"],
"#layout/*": ["src/layout/*"],
"#pages/*": ["src/pages/*"]
}
}
Is there a way to do the same on a project that does not use TypeScript, just regular Javascript in node with ES6 modules on?
I found that node already has something called Subpath imports, is not exactly the same but it works for me. For anyone looking for something similar, this just uses # instead of #:
on the package.json
"imports": {
"#src": "./src/*",
"#controllers/*": ["./src/controllers/*"],
"#routes/*": ["./src/routes/*"]
}
And then import on your app, – In this case I use ES modules:
import File from '#routes/file.js'
I read code in an app with NextJS. It imports component like import Head from '~/components/layout/head'
The project structure:
-app
---components
---pages
---public
I wonder where defines ~ as root dir in nextJS.
Where can I find the config of this?
Tried uncover the webpack config inside next package, but didn't find.
With Typescript's paths feature you can specify a module mapping.
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": "./src",
"paths": {
"#anything/utils/*": ["app/utils/*"],
"#anything/pipes/*": ["app/pipes/*"]
}
...
}
}
This will allow you to import using
import x from '#anything/utils/dateToNum';
that will be mapped to app/utils/dateToNum.
If your are using webpack, you will need to use tsconfig-paths-webpack-plugin.
According to the doc.
You can set the module mapping without extra libs.
In your file structure, try this example.
// tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"~*": ["./*]
}
}
}
Then go to your files:
import { xxx } from '~/components';
// or
import xxx from '~/components/xxx';
I find this is because the babel plugin babel-plugin-root-import, since the project uses this plugin in babel config.
More about this plugin can check here.
I have 2 sources in my project. How can I import a file from MyProject in nest-project-payment?
This is the file structure of my project:
Tried using the following import statement:
import { User } from "MyProject/src/entity/User";
import { User } from "../../../MyProject/src/entity/User";
With ../ you move one folder up.
If you want to use an import like in your example, make the following change to your tsconfig.json file:
"baseUrl": "./",
"paths": {
"#nest-project-payment/*": ["nest-project-payment/*"],
"src/*": ["src/*"]
}
How to organize Angular 2 app folder structure like Java packages?
Consider the following project layout:
app
|_model
|_component
|_service
I would like to import foo.service.ts from service to bar.component.ts in component. But as far as I know, Angular 2 import supports only relative paths like /../service/, which seems very clunky solution.
Is there a way to refer folders with absolute bath from root folder, like with Java packages?
UPDATE 2016-06-01
using npm install typescript#next you can already use this function
I assume that your tree looks like this:
node_modules
|_#angular
|_rxjs
app
|_model
|_component
|_service
package.json
tsconfig.json
You should add in your tsconfig.json the following lines:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"app/*",
"node_modules/*"
]
}
}
}
then you can reference your modules like you do with regular #angular/rxjs modules
import { MyService } from 'service/MyService';
import { Component } from '#angular/core';
import { Observable } from 'rxjs';
Note: webpack needs also the following lines in webpack.config.js
resolve: {
modulesDirectories: [
'node_modules',
'app'
]
}
Not yet, it should be present soon with Typescript 2.0
Look here
https://github.com/Microsoft/TypeScript/issues/5039