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 ?

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 ?

• javascript
• reactjs

• 1 It imports an entire module's content. – Tholle Commented Nov 15, 2018 at 13:41
• How "'../actions' mean index.js file?" has nothing to do with the * import kind. – Bergi Commented Nov 15, 2018 at 13:42
• @Tholle I think what's puzzling the OP is that in that source tree, ../actions from the perspective of that Game.js source file refers to an entire directory of JavaScript source files. – Pointy Commented Nov 15, 2018 at 13:42
• Also, it is important to note that * is a common wildcard character when doing searches or queries. It just matches everything. In this case, you are importing everything that matches * from the ../actions file. So, just everything from the file. I'm also guessing ../actions is the lazy way of writing ../actions.js – TheCrzyMan Commented Nov 15, 2018 at 13:53

3 Answers 3

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