ES6：“导入 * 作为别名”与“导入别名”

Question

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

Answer 1

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 ).

Answer 2

import utils from 'utils' imports default from 'utils' package. undefined in the case provided.

import * as utils from 'utils' imports entire module exports object with all available named exports including default.