What does import * do in Javascript?

user_8701527 0
Viewed 12667

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 ?

reactjs javascript
3 Answers

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

user_15508870

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

user_62041500

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';
user_3001080
Related