web-dev-qa-db-ja.com

ES6：「エイリアス*としてのインポート」と「エイリアスのインポート」

違いはありますか：

import utils from 'utils'

そして

import * as utils from 'utils'？

ケースAの場合：

//utils.js
export function doSomething()
{
//...
}

ケースBの場合：

//utils.js
export function doSomething()
{
//...
}
export default function doSomethingDefault()
{
//...
}

[〜＃〜]更新[〜＃〜]：

Vscodeのインテリセンス機能で誤解を招きましたが、推奨されるように、node + babelでの小さなテストは違いを示しました：

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

enter image description here

javascriptecmascript-6es6-modules
17
Philipp Munin

あなたの例から：

ケースA：

//utils.js
export function doSomething()
{
//...
}

ケースB：

//utils.js
export function doSomething()
{
//...
}
export default function doSomethingDefault()
{
//...
}

結果：

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, doSomethingDefault: function })

import { doSomething } from 'utils'
doSomething() // (both Case A and Case B: doSomething = doSomething)

ケースAとケースBの違いは、ケースAではimport utils from 'utils'、utilsはデフォルトのエクスポートがないため、undefinedになります。ケースBでは、utilsはdoSomethingDefaultを参照します。

import * as utils from 'utils'、ケースAではutilsには1つのメソッド（doSomething）があり、ケースBではutilsには2つのメソッド（doSomethingおよびdoSomethingDefault）。

12
inostia

import utils from 'utils'「utils」パッケージからデフォルトをインポートします。提供されたケースではundefined。

import * as utils from 'utils'モジュール全体exportsオブジェクトをインポートします。デフォルトを含む、使用可能なすべての名前付きエクスポートが含まれます。

7
Yury Tarabanko