I am trying to rewrite all existing relative paths in my javascript/typescript project to absolute paths.
Example:
import example from "../../example"
would be rewritten to
import example from "src/components/example"
So I am looking for a script or similar to transform all these imports. Preferably it would be possible to run this as an npm script on precommit or similar.
Is there a way to do this?
It looks like imports are done for static analysis and cannot truly be dynamic (Importing modules using ES6 syntax and dynamic path). I am wondering though if you can do something in the tsconfig.json to accomplish this. Under the "compilerOptions: { ..., "paths": { "#components/": "src/components/". I am not sure this will solve your use case but it may be worth a try. So your import would look like:
import { example } from "#components/example"
I also faced this problem and created an ESLint plugin to solve it. You can find it here: https://github.com/qDanik/eslint-plugin-path
Related
I'm using BabylonJS in a StencilJS app, and I can only seem to import in a very specific way.
For instance I can't do:
import { Engine, Scene } from "babylonjs";
It says 'Engine' is not exported by node_modules\babylonjs\babylon.js
But it is..
I can do:
import BABYLON from 'babylonjs';
and use it like
private _scene: BABYLON.Scene;
I'd like for the former to work. Any advice?
The first way is how most tutorials do it, and I refuse to believe SencilJS is just not capable of that. I must be missing something
BabylonJS is provided in two versions (ES5 and ES6). The issue you are referring to is related to ES5 version of package.
If you do smth like this in your code
import * as babylon from 'babylonjs';
console.log(babylon);
and look into the console, you will see next:
{default: Module, __moduleExports: Module, babylonjs: undefined}
That's why decomposition is not working, it's not an object that can be serialized the way you expect.
In documentation they say
import { Engine, Scene } from 'babylonjs';
NOTE: if you can't make this import method to work, go to the section on typescript and webpack below.
However, I failed to make it work for ES5 version. The correct way, as to me would be to use ES6 version of package, which can be installed as
npm install -S #babylonjs/core
This version allows you to use ES6 packages together with tree shaking and other useful features.
Your module import, in this case, would look exactly as you wish:
import {Engine, HemisphericLight, Mesh, Scene} from '#babylonjs/core';
Here is a small example I've done to prove my words.
Please, let me know if I got you wrong and you expected to have smth different or you need some additional explanations or materials - I'll be happy to assist.
I'd like to understand how to use Babel, webpack or whatever the tool I need to import a single component from a library.
Here https://rsuitejs.com/en/guide/usage when you scroll down to 'Use modularized rsuite' they say that I need to install babel-preset-rsuite and then add a .babelrc file, but with this in it:
{
"presets": ["rsuite"]
}
I've done it, and it still does not import the .less styles. So I end up with an HTML button without the nice styling that goes with it.
(I'm a bit titled, have tried every possible thing and nothing works, I just broke my entire codebase because of another webpack issue, fortunately I was able to recover it thanks to my VCS)
Can someone, please, explain the beginner that I am what exactly do I have to do? Do I have to run a specific command instead of react-scripts start so that it takes this .babelrc file into account?
Thanks
OFF:
To use a single component from a library:
Install a library
Import the necessary component:
import { Example } from 'example-installed-library'
ON:
And related to babel, I recommend this article to read:
https://www.valentinog.com/blog/react-webpack-babel/
And of course it's own site with documentation: https://babeljs.io/
By not introducing less by default, you need to configure style: true.
{
"presets": [["rsuite", { style: true }]]
}
So my goal is to create a library in Typescript. My intention is to split up core parts of the library into submodules like RxJS or Angular Material.
RxJS and Angular both support imports like so:
// RxJS
import { map, filter } from 'rxjs/operators';
// Angular
import { MatButtonModule } from '#angular/material/button';
However, I am unable to replicate this myself.
My goal is to do something similar and allow you to import a class with import { foo } from 'package/bar;
I have looked at RxJS's source on Github and have tried replicating what they've done but it's not working.
The library compiles fine but when I go about importing it I always get a Cannot resolve dependency 'package/foo' error.
Meanwhile doing import { test } from package (without the submodule part) works completely fine.
I've tried using paths in tsconfig to no avail. If that is the answer then I'm doing it wrong.
How do I go about doing this?
In order to achieve that, you can create your "sub-modules" in different directories (although they are technically part of the same module), and create an index.ts on each of those directories exporting there whatever you want to publish.
For example, I have done this in my NodeJs package Flowed, and you can for example do this:
import { FlowManager } from 'flowed/dist/engine';
Where the corresponding index.ts file is this one if you want to check.
Although in my case I put also available all the stuff from the root, so the previous line would be equivalent to:
import { FlowManager } from 'flowed';
I was going through someone's code and found this:
import { NGSWUpdateService } from '#ngsw/ngsw-update.service';
The developer has been able to use '#ngsw/ngsw-update.service' instead of original very long path 'src/client/app/shared/ngsw/ngsw-update.service'.
So how to implement the above so that I don't have to import from relatively long paths.
Here's the code.
When you import from a path that is not relative, it'll look into the node_modules folder.
So here, it's just looking for the file ngsw-update.service here: node_modules/#ngsw/ngsw-update.service.
That's the most basic use case but you can only use that those kind of paths with files from your project by defining them into tsconfig.json (within compilerOptions.paths`, see that article for more: https://netbasal.com/sexier-imports-in-typescript-e3c645bdd3c6
I have an ES6 import.
import MyAwesomeComponent from 'packageNameOnlyWithoutPath';
I want to inspect the file packageNameOnlyWithoutPath. But I can't find it. I looked in node_modules but I don't see it there. So it might be hiding out elsewhere in the app.
Is there a canonical way to find the path that leads to packageNameOnlyWithoutPath?
you might want to take a look at index.js file in the packageNameOnlyWithoutPath folder inside the node_modules.
Else use text editors which supports goToDefinition plugin
TL;DR: Check resolve aliases in Webpack (or similar bundler) config or .babelrc
There's two places you can check first.
If you are using a bundler like Webpack, resolve aliases can be declared in the Webpack config file (usually webpack.config.js).
But I have also recently started using pure babel and node. The reoslves can also be declared in the .babelrc file (cleaner approach IMHO).
You should find what you're looking for in one of the above.