ES6:“导入*作为别名"；与“导入别名" [英] ES6: "import * as alias" vs "import alias"

问题描述

两者之间是否有任何区别

从'utils'

导入utils

和

<代码>进口*从utils的 'utils的'

如果是A:

 //utils.js导出函数doSomething(){//...} 

如果是B:

 //utils.js导出函数doSomething(){//...}导出默认函数doSomethingDefault(){//...} 

更新:

我被vscode的智能感知功能误导了，但根据建议，对node + babel进行的一项小型测试显示出差异:

 //index.js从'./utils1'导入utilsCaseA从'./utils1'导入*作为utilsCaseAWildcardvar utilsCaseARequire = require('./utils1')进口utilsCaseB从" ./utils2'从'./utils2'导入*作为utilsCaseBWildcardvar utilsCaseBRequire = require('./utils2')var compareObjects ={utilsCaseA，utilsCaseAWildcard，utilsCaseARequire，utilsCaseB，utilsCaseBWildcard，utilsCaseBRequire};console.log(compareObjects); 

解决方案

来自您的示例:

案例A:

 //utils.js导出函数doSomething(){//...} 

情况B:

<预> <代码>//utils.js导出函数doSomething(){//...}导出默认函数doSomethingDefault(){//...}

结果:

 从'utils'导入utilsutils()//(案例A:未定义，案例B:doSomethingDefault)从'utils'导入*作为utilsutils//(案例A:utils = {doSomething:函数}，案例B:utils = {doSomething:函数，默认值:函数})从'utils'导入{doSomething}doSomething()//(案例A和案例B:doSomething = doSomething) 

案例A和案例B之间的区别在于，在案例A中从'utils'导入utils时， utils 将是 undefined ，因为没有默认导出.在情况B中， utils 将引用 doSomethingDefault .

使用 import *作为'utils'中的utils，在情况A中 utils 将具有一种方法( doSomething )，而在情况B中 utils 将具有两种方法( doSomething 和 default ).

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

解决方案

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

这篇关于ES6:“导入*作为别名"；与“导入别名"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！