Question

3

ES6: import * as alias vs import alias

rated 0 times [ 5] [ 2] / answers: 1 / hits: 24453 / 7 Years ago, tue, august 15, 2017, 12:00:00

Is there any difference between:

import utils from 'utils'

and

import * as utils from 'utils'?

In case A:

//utils.js

export function doSomething()

{

//...

}

In case B:

//utils.js

export function doSomething()

{

//...

}

export default function doSomethingDefault()

{

//...

}

UPDATE:

I was mislead by intellisense feature of vscode, but as recommended a small test on node+babel showed the difference:

//index.js

import utilsCaseA from './utils1'

import * as utilsCaseAWildcard from './utils1'

var utilsCaseARequire = require('./utils1')



import utilsCaseB from './utils2'

import * as utilsCaseBWildcard from './utils2'

var utilsCaseBRequire = require('./utils2')



var compareObjects = 

{

    utilsCaseA, utilsCaseAWildcard, utilsCaseARequire,utilsCaseB,utilsCaseBWildcard,utilsCaseBRequire

};

console.log(compareObjects);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

travion

Add To Favorites

Follow

Total Points: 137

Total Questions: 96

Total Answers: 103

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

travion questions

1 Tagify set data in tagify input on click

Mon, Dec 16, 19, 00:00, 5 Years ago

1 Laravel - How to Import Vue Component to Another Component

Sat, Oct 19, 19, 00:00, 5 Years ago

1 Date conversion in react js

Fri, Sep 20, 19, 00:00, 5 Years ago

1 How can I style react semantic components?

Wed, Nov 14, 18, 00:00, 6 Years ago

1 Problem with onChange for Masked Input in React

Sun, Oct 28, 18, 00:00, 6 Years ago

View All

answered 7 Years ago mary · Accepted Answer

From your example:

Case A:

//utils.js

export function doSomething()

{

//...

}

Case B:

//utils.js

export function doSomething()

{

//...

}

export default function doSomethingDefault()

{

//...

}

Result:

import utils from 'utils'

utils() // (Case A: undefined, Case B: doSomethingDefault)



import * as utils from 'utils'

utils // (Case A: utils = { doSomething: function }, Case B: utils = { doSomething: function, default: function })



import { doSomething } from 'utils'

doSomething() // (both Case A and Case B: doSomething = doSomething)

The difference between Case A and Case B is that, in Case A import utils from 'utils', utils will be undefined because there is no default export. In case B, utils will refer to doSomethingDefault.

With import * as utils from 'utils', in Case A utils will have one method (doSomething), while in Case B utils will have two methods (doSomething and default).