I would like to be like to be able to get a relative import:
e.g.
import Router from '#/router/router.js'
import IndexController from '#/controller/index.js'
Is there a easy way to achieve this? I have never set it up myself but I was able to use it with frontendframe works such as react or vue when setting them up through their cli. I'm pretty sure they do it with webpack, but is there a way to achieve this flexibility without adding any additional tooling such as webpack?
Related
why not simply use folders instead of modules if the only purpose is to make the structure more organized?
It is weird because it does not seem necessary since every file is a separate module in node js and if i need anything i have to import it using the import statement anyways so what is the point of specifying the imports and exports in a module? does it affect the dependency injection if i just import what i need without using modules(#Module decorator) or something similar?
NestJs has opted to design their framework with dependency injection as one of its core principals. Ie, you write your code just using the name/type of the services you want to use, and then a different piece of code is responsible for finding that service, knowing how to construct it, and then passing it in to you.
Native import/export doesn't have a system for dependency injection, so the main thing that the #Module decorator does is organize the metadata needed for the injector system.
The title may seems a bit confusing, let me explain.
I'm using an opensource library pico which has a not exported object "pico", so I put ?raw keyword to import it in my frontend project with webpack 5.
import "./lib/pico.js?raw";
And it works properly on my frontend page.
--
Then when I want to unit test it by jest, I found jest-raw-loader by this post, but the pico seems won't be imported by using this library.
The ?raw on webpack seems more similar as script-loader library.
And jest-raw-loader seems more similar as raw-loader on older versions.
Although webpack official doc suggest to replace raw-loader with ?raw, but they seem different in my case.
I know I can simply edit this pico.js file to export this object. But what if next time I have a far larger library need to be managed? Is there any other way to import this kind of "not exported" object?
I created my project using angular 2 CLI. However I am wondering how I can stop using the crazy imports like
import { SomeSharedComponent } from '../../../shared/some-shared-component';
I am using what the angular cli generated for me. So, is it possible to use something like
import { SomeComponent } from 'app/shared/components/some-component'
Thanks
The best approach is to use TypeScript v2.0 or newer (still in beta). The reason is that it gives you the ability to use path mappings.
This would allow you to define a path map named app-shared and then use that to point to the desired shared component: app-shared/some-shared-component
I had the same problem and resolve it by using a symbolic link referencing the shared folder. You should also add it to system-config.js.
import { SomeSharedComponent } from './shared/';
with the following declaration in system-config.js.
const barrels: string[] = [
(...)
// App specific barrels.
'app',
'app/shared',
/** #cli-barrel */
];
I would be interested by a cleaner solution.
Edit:
You should also include an index.ts in the shared folder with the following content.
export * from './some-shared-component';
Then you can use the import statement without the name of the component.
import SomeSharedComponent from ''../../../shared/'
However, it still requires the relative path part.
I have made a Plunker to clarify the usage from the Angular2 hero tutorial. See in particular the following files.
app/relative/hero-relative.component.ts
app/shared/my-shared.component.ts
app/hero-search.component.ts
You should have a look at this issue about the Angular2 style guide. This question could also be interesting.
I think for a complete solution (without relative path) we will have to wait until webpack module manager is adopted by Angular CLI as stated in the GitHub issue. A webpack preview is already available.
Bear with me, I'm not sure if this is purely a React Native issue, or just an ES6 question in general. But I noticed I'm unable to do this:
import {navBarRouteMapper} from '/src/helpers';
I get an error saying it's unable to resolve the module. I have to do this instead:
import {navBarRouteMapper} from '../../../src/helpers';
Keeping track of folder depth can get a bit unmanageable as the complexity of the app grows. Why am I not able to use an absolute path?
EDIT:
I see people are recommending adding babel, but I don't want to pollute React Native's system. There's obviously transpilation to ES6 already going on. I was hoping for a solution specific to the React Native ecosystem.
There is actually a pretty clean solution for React Native, have a look here: https://medium.com/#davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1#.u47sl3p8x.
TL;DR:
You'll just have to create a package.json file in your src/helpers folder:
{
"name": "#helpers"
}
And you will be able to import it from anywhere:
import { navBarRouteMapper } from '#helpers'
I'm learning ReactJS right now and trying to separate all the components into discrete files.
Is there some strategy to simplify the process of requiring/importing components? It seems rather silly to have import React from 'react'; on the first line of every component file?
I'm using Babel for the import function.
To get around writing import React from 'react' every time, you can use Webpack and:
write a loader that adds the statement import React from 'react' to every JSX file it encounters; or,
use React from a CDN and include it as a Webpack external in your configuration.
I believe that's the recommended way if you want to use the import/export mechanism from ES6 to separate the component.
A way to not do this is to assign React as a global variable, but that kinda defeat the purpose of using import/export.
Indeed we need to do similar things in other languages like Java?