ES6 モジュールの使用問題の分析

ES6 がモジュール性の概念を導入した後、JavaScript は新時代の放浪者になりました。

使っていく中で、いくつか問題点や分からない点があったので、ここにまとめておきます。

には関与せず、とcommonjsにのみ関与します。importexport

Reactを例に挙げてみましょう

関数コンポーネントをエクスポートする (従来の書き方):

export default function App() {
    
    
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

ここでは関数名を消去することを選択できますが、問題ありません。

export default function () {
    
    
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

前者と比較して確認できる違いの 1 つは、ブラウザーの React 開発者ツールではコンポーネント名がになることですdefault。

次に、デフォルトのエクスポートは通常、簡単に観察できるようにファイルの最後に書き込まれますが、これはベストプラクティスであるため、書き直す必要があります。

function App() {
    
    
  return (
    <div>
      <h1>APP</h1>
    </div>
  )
}

export default App

初期の頃の私の書き方は、コードの行数を少なくするためだけに、最初の例と同様に、エクスポートと関数の定義を 1 行で記述する方法がほとんどでした。後でソースコードを読んでみると、デフォルトのエクスポートのほとんどが最後に書かれていることがわかったので、大手に倣ってこの書き方を選択しました。

探索を続けます

実際的なことについては議論せず、発生した問題についてのみ議論する

上記の例の続きで、簡略化を追求する場合は、アロー関数として書き換えます。

const App = () => (
  <div>
    <h1>APP</h1>
  </div>
)

export default App

極端な書き方

export default () => (
  <div>
    <h1>APP</h1>
  </div>
)

しかし、このように書いてしまうとうまくいきません。

export default const App = () => (
  <div>
    <h1>APP</h1>
  </div>
)

実際、がdefault削除された場合、このエクスポートは再び機能します。以前に成功したデフォルトのエクスポートと相まって、この動作によりエラーがさらに混乱します。私はフォーラムでこの回答を見つけました。

https://stackoverflow.com/questions/36261225/why-is-export-default-const-invalid

まず、各ファイルがデフォルトでエクスポートできるのは 1 つだけであることを明確にする必要があります。デフォルトで複数のデータをエクスポートしたい場合は、オブジェクトを使用する必要があります。

変数宣言は通常1つずつ記述しますが、カンマで区切って複数の変数を一度に宣言することもできます。

const a = 1
const b = 2

const c = 3,
      d = 4

実際に複数の変数を宣言すると、デフォルトのエクスポートのルールが破られます。これを防ぐために、export default変数宣言と同じ行にそれを存在させることはできません。

export問題ありません。複数のエクスポートを受け入れることができます。

うまくいかない別のシナリオを見てみましょう

import store from "./store"

// bad
export store

import store from "./store"

export default store

前者が有効にならないのはなぜですか? 正確には別ファイルからインポートしているのですが、名前でエクスポートするのがちょうど良いのではないでしょうか?

シーンを変更すると、これをよりよく反映できます。

const store = 10  

// bad
export store

オブジェクトならまだしも、単純型の場合はどうなるでしょうか？向こう側では受信する方法がありません。

export 10

単純型の場合、オブジェクトまたはデフォルト形式でのみエクスポートできます。

const store = 10  

export {
    
    
  store
}

デフォルトでインポートされたデータについては、デフォルトで再度エクスポートすることのみ可能で、それ以外の場合は追加することができます{}。これにより、対応するキー値を追加できます。

いくつかのライブラリを閲覧していたら、このような書き方を見つけました

export {
    
     default as store } from "./store"

これは組み合わせの書き込み方法で、デフォルトでは対象ファイルをインポートしてエクスポートする際に、名前を付けて現在のファイルにエクスポートすることで、二次処理を行わずに転送ステーションのゲームプレイを実行します。

import store from "./store"
export {
    
     store }

まだ未解決の質問がいくつかあることがわかったので、この続編を公開しました。