Help us understand the problem. What is going on with this article?

import * as XX from YYとimport XX from YYの違い

ふと思うとあまり理解していなかったので調べたついでにメモ
間違いあればご指摘ください、、

結論

default exportのときはimport XX from YY
named exportのときはimport * as

細かい仕様は以下に書いてた
・import
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
・export
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

default exportのとき

export側

defaultExport.js
const default = () => {......}

export default = default 

import側

import.js
import hoge from 'defaultExport'

// 使うとき
hoge()

named exportのとき

export側

namedExport.js
export const named1 = () =>{......}
export const named2 = () =>{......}

import側

import.js
import * as hoge from 'namedExport'

// 使うとき
hoge.named1()
hoge.named2()

// こちらでも可
import { named1, named2 } from 'namedExport'
named1()
named2()

個人的には

named exportの方が定義側と同じ名前を使えるのでバグとか少なそうで好きかも

hrkzmaaa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away