What does import * do in Javascript?

问题

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 ?

回答1:

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

回答2:

the import * as name syntax imports all  contents  of js files

For example: if you want to import an entire module's contents and access the doAllTheAmazingThings function

import * as myModule from '/modules/my-module.js';

than use like

myModule.doAllTheAmazingThings();

this is the docs

回答3:

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

import Class1 from './mymodule/Class1';

来源：https://stackoverflow.com/questions/53320734/what-does-import-do-in-javascript

标签

javascript

reactjs