This question already has answers here:
Is it possible to import modules from all files in a directory, using a wildcard?
(14 answers)
Closed 2 years ago.
Lets say in my project i have a folder models and i dont know how many js-files are within it? Is there way to import all default values from each file with sintax like this or something
import * as models from './models'
so variable models would have an object where keys are files' names and values are default values or i should import from each file separately?
Thank you
I assume you might have following structure:
models
|------> model1.js
|------> model2.js
So now Add another file called index.js as like as given below:
models
|------> model1.js
|------> model2.js
|------> index.js
And index.js file will be like:
import * as model1 from "./model1.js"
import * as model2 from "./model2.js"
export { model1, model2 };
Now you can call models/index.js file from anywhere as like as given below:
import * as models from "./models";
// models.model1
// models.model2
Hope it might solve your problem.
Related
I imported JavaScript files into Angular project like this: https://www.truecodex.com/course/angular-6/how-to-use-external-js-files-and-javascript-code-in-angular
It's all working fine. However, there is one problem. I have 2 JavaScript files that I imported that have the same name. So, when I use it in my component's typescript like this:
declare const CMenu: any
there is a name collision between those 2 functions.
Is there a way to import JavaScript files, just for one particular Angular module. For example, to specify in Angular.json in which module to import the JavaScript file. I actually have a lot of JS files that use same function names, and I need to use those from 2 different modules (each module using different function with the same name).
You can import it with an alias on the page where you need it.
import CMenu as CeeMenu from 'locationA';
import CMenu as CMenu from 'locationB';
declare const a:CeeMenu;
declare const b:CMenu;
These imports can be joined in one file, exporting them with an alias, hence you can import them from one location.
import CMenu as CeeMenu from 'locationA';
import CMenu as CMenu from 'locationB';
export CeeMenu as AA, CMenu as BB;
then
import AA, BB from 'locationC';
declare const a:AA;
declare const b:BB;
This question already has answers here:
Fetch local JSON file from public folder ReactJS
(5 answers)
Closed 1 year ago.
I have a ipAddress.json file that has the contents:
{
"ipAddress": "11.111.111.111"
}
In the public folder i put that ipAddress.json file into an "ipAddress" folder so the path looks like "public/ipAddress/ipAddress.json"
But I cannot read this file. I am trying
const ipAddress = (require(process.env.PUBLIC_URL + '/ipAddress/ipAddress.json')).ipAddress;
using "json-loader" common library.
How do I get this to work? According to (Using the Public Folder) it should work just fine.
But I get this error:
Module not found: You attempted to import /ipAddress/ipAddress.json
which falls outside of the project src/ directory. Relative imports
outside of src/ are not supported.
Thank you for any help
If its just a json object you should be able to create a js file with the data inside a const object. Then export the const as a module.
New JS file to create:
const ipAddressJson = {
ipAddress: "11.111.111.111"
};
module.exports = ipAddressJson;
Inside the file you want the json object:
import ipAddressJson from 'path-to-the-js-file-above';
https://codesandbox.io/embed/tender-bash-2hjei
Why not put your JSON files into your project scope?
For example, if you have created the react app using create-react-app, the src folder will be the default project scope.
Put your JSON files into some folder like src/data and simply:
import data from '../data/somefile.json
I was browsing through this repo on Github and was trying to comprehend the working of the code
Here, the author (or programmer) have mentioned import * at multiple places so I am trying to comprehend and understand how import * work?
First in Game.js file of his repo he have mentioned/written like this
import * as actions from '../actions';
In VS Code, when if I click on '../actions using command It is redirecting me to this file -> index.js
then in Index.js they have something like this
import * as ActionTypes from './action-types';
when I click on ./action-types it redirects me to here action-types.js
I went through firefox docs but I wasn't able to clearly make sense for the first example like for one, the action folder contains multiple files and how does import * as actions from '../actions'; mean index.js file
While i get he have called/referenced the functions using actions.functionName() or ActionType.TypeName
My Prime question remains
how does import * as actions from '../actions'; mean index.js file ?
The import * as name syntax imports all exported content of a javascript file.
For example, if you want to import an entire module's contents, then access the doAllTheAmazingThings() function
import * as myModule from '/modules/my-module.js';
myModule.doAllTheAmazingThings();
From the docs
Import in js is new syntax of ES6 to import a module it has the same work of require but its easier to filter what do you want in a module
In your example you import * as actions from '../actions'; you import all function from ../actions file
its same to do const actions = require('../actions')
but its easier to manage what you want
this syntax is not work on all browser so be sure to use transpiler with babel or other
you can see this syntax in python too
When you reference a directory in an import statement, it looks and loads the index.js file in that directory. What I usually do there is export classes and functions under that directory in a grouped object, so they can be easily accessed:
For instance in index.js I export sth like:
{
Class1,
method1
}
where each is imported as such:
import Class1 from './Class1';
So they just group the classes/methods/... that are in files in the directory.
Then you can easily access it as such:
import { Class1, method1 } from './mymodule';
vs
import Class1 from './mymodule/Class1';
i am developing one sample implemented Project, in this project some js files getting from paths like ./../folder/file.js and some files getting from folders like 'myfile' here second way when will we get like this.
i am confusing this second way any one clarify this .
here i am attached image please check it once image.
Suppose you have following files
app
/constants
StringConstants.js
/utils
StringHelper.js
StringConstants.js
export const DONE_BUTTON_LABEL='DONE';
export const CREATE_ALERT= 'Create Email Alert';
export const CREATE= 'CREATE';
export const CANCEL= 'Cancel';
StringHelper.js
class StringHelper {
...
}
export default new StringHelper();
How to import? See following examples
import StringHelper '../utils/StringHelper';
import * as StringConstants from '../utils/StringConstants';
//You just imported all constants from StringConstants file. Use it as StringConstants.DONE_BUTTON_LABEL or StringConstants.CREATE
import {CREATE_ALERT} StringConstants from '../utils/StringConstants';
//import CREATE_ALERT constant from StringConstants file.
In my Angular 2 app, I have a settings.js file with various exports that I want to use throughout the application:
exports.httpPort = 9000;
exports.httpsPort = 1435;
exports.segmentID = 1;
I want to export some of these into my ts component file query.component.ts, but I'm at a loss on what the correct syntax to do so is.
I see that many .js files have something along the lines of
var settings = require('../../settings');
which grabs the settings file and then
settings.dbConfig
Which calls the export, but it doesn't work on my component file.
This is my project file structure:
component.ts
- project/web/src/app/component.ts
-Place where I want to import an export from settings.js.
settings.js - project/server/settings.js
-File where I want to make the export.
In the component class you can do:
...
import {httpPort} from "../../../server/settings.js"
...