Zenn
🎉

[JS, TS] import, export, constについて

2020/12/31に公開
JavaScript
React
TypeScript
Vue.js
tech

はじめまして

Zennデビューです。eitchesです。
最近は独学でReactを触っています。

よくimportってこんな書き方しますよね。

1. import firebase from 'firebase/app'
2. import { auth } from 'firebase/app'

これってfirebaseとかauthをexportしてるからimportできると思うのですが、
どのような形でexportしたらどのような形でimportできるのか、
曖昧なまま学習を進めてしまっていて、いざ実装！となったときに少し詰まってしまいました。

今回得られた知見を備忘録として残しておきます。

前提コード

※面倒なので ~/を起点とします

firebase.utils.js

~/firebase.utils.js
import firebase from 'firebase/app'
import 'firebase/auth'

const provider = new firebase.auth.GoogleAuthProvider()

export const auth = firebase.auth()

export const signInWithGoogle = () => auth.signInWithPopup(provider)

export default firebase

importで呼び出し

component.jsx

~/component.jsx
import React from 'react'
// 正しい参照方法
import firebase from '~/firebase.utils.js'
import { auth, signInWithGoogle } from '~/firebase.utils.js'

// 参照不可（export defaultのため {} は不要）
// import { firebase } from '~/firebase.utils.js

// 参照不可（export defaultではないので {} が必要）
// import auth from '~/firebase.utils.js'
// import signInWithGoogle from '~/firebase.utils.js'
 
// 参照不可（exportしていない）
// import provider from '~/firebase.utils.js'
// import { provider } from '~/firebase.utils.js'


const hoge = () => (
  // 正しい参照方法
  <button type='button' onClick={signInWithGoogle}>Text</button>
  
  // 参照不可（firebaseとsignInWithGoogleは独立している）
  // <button type='button' onClick={firebase.signInWithGoogle}>Text</button>
)

結論

  1. export default XXX は import XXX from '...' として呼び出す
  2. export const YYY は import { YYY } from '...' として呼び出す
  3. export XXX と export default YYY において、 XXXとYYYは独立している
    => XXX.YYYとして呼び出せない（上記の firebase.signInWithGoogle ）

Discussion