ES6クラスとモジュールシステムのスコープ

Question

スコープ/ホイスト/ロードの順序に問題があります。以下では、Auth0Lockは、ライン6のブロックif内に定義されていますが、すぐ外にもクラス内にも定義されていません。誰もがなぜ知っていますか？

import { EventEmitter } from 'events'; 
import { isTokenExpired } from './jwtHelper'; 

console.log('in'); 
const isClient = typeof window !== 'undefined'; 
if (isClient) { 
    let Auth0Lock = require('auth0-lock').default; 
    console.log('isClient'); 
    console.log('Auth0Lock inner', Auth0Lock); 
} 
    console.log('Auth0Lock outer', Auth0Lock); 
export default class AuthService extends EventEmitter { 
    constructor(clientId, domain) { 
    super(); 
    console.log('happening'); 
    if (!isClient) { 
     console.log('returning'); 
     return false; 
    } 
    // Configure Auth0 
    this.lock = new Auth0Lock(clientId, domain, {}); 
    // Add callback for lock `authenticated` event 
    this.lock.on('authenticated', this._doAuthentication.bind(this)); 
    // Add callback for lock `authorization_error` event 
    this.lock.on('authorization_error', this._authorizationError.bind(this)); 
    // binds login functions to keep this context 
    this.login = this.login.bind(this); 
    } 

// curtailed 
} 

Answer 1

letキーワードは、ブロックがスコープされていますhttps://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/let

let x = "hey"; 
{ let x= "hi"; } 

を、それはそれ自身のスコープ内にあるので、外let xが上書きされていません。あなたの質問に戻ってくる。 let Auth0Lockはifブロックにのみ存在します。

Answer 2

コードがブラウザで実行されているかどうかを判断します（ブラウザではtypeof window === "object"）。そうであれば、CommonJSスタイルのモジュールローダーを使用して'auth0-lock'モジュールをロードしようとします。

その2つの大きな問題があります。同様nodejs側で実行するように意図されている場合は

は、モジュールは、それが本当のために定義されていないためTypeError: Auth0Lockは、11行目で定義されていないスローされます、。

letキーワードがブロックスコープであるため、ブラウザーで実行されている場合でもTypeErrorが発生するため、11行目ではまだ定義されていません。