ESモジュールについて知りません

ESモジュールを知らない方法に入る前に、ESモジュールについて知っていることを確認しましょう.デフォルトの輸出と輸入を始めましょう.

// bar.js

export default () => "Bar!";

// foo.js

import Bar from "./bar";

const Foo = `Foo${Bar()}`;

あなたは簡単に何かに名前を変更することができますデフォルト値をインポートしている.では、名前付きの輸出と輸入に移りましょう.

// bar.js

export const Bar = () => "Bar!";

// foo.js

import { Bar } from "./bar";

const Foo = `Foo${Bar()}`

そこで、我々はその関数に名前付きエクスポートバーを割り当てています.そして、それは静的最適化を可能にする正確な同じ名前によってインポートされますES6 tree shaking .
さあ、すぐにパッケージからインポートしましょう.

// foo.js

import { Bar } from "foo-bar";

const Foo = `Foo${Bar()}`;

NPMからパッケージをインストールし、名前でインポートします.今私はESモジュールについて知っているすべてをリセットし、それらが実際に何を説明することができます.

実際のESモジュール
実際のESモジュールは、知っているESモジュールから二つの大きな変更しかありません.

拡張機能を含める必要があります

あなたはURLからサードパーティのライブラリをインポート

つ目の上を行きましょう.インポートに拡張機能を含める必要があります.なぜ?他の拡張子を使用している可能性があるので.js そして、ブラウザはあらゆる可能な延長の上でループしなければならなくて、それが存在するかどうか見るために要求を送るでしょう.
さあ、2つ目の上を行きましょう.あなたはサードパーティ製のライブラリをインポートします.これは、Webが低下する可能性がある場合は、Webサイトは、NPMのような単一のパッケージのレジストリで分散されることを意図しているので、どのように動作します.代わりに、モジュールはURLからロードされるので、あなたは何かを使うことができましたskypack.dev NPMパッケージを実際のESモジュール構文を使用するように変換するには.しかし、この偽ESモジュールの構文はどこから来ましたか?
Kenchen‐Chiangノードモジュール分解アルゴリズム
Nodejsが2006年につくられたときに戻りましょう.2016年に作成されたESモジュールの10年前であり、NodeJSのモジュール形式を作成しなければならなかった.
彼らは、現在CommonJsとして知られているものをつくりました.CommonJsは、ダイナミックなダイナミックな輸入と輸出を持ちます.また、NPPMからの輸入品node_modules フォルダが相対パスでない場合、CommonJSはインポートのための拡張子を使用しません.webpack 1のような古いバンドルは、Browling用のCommonJsを使用しました.
その後ES 6とESモジュールが来ました.その時、ネイティブのESモジュールはサポートされていなかったので、サイトは、モジュールをサポートしていないブラウザと互換性のあるコードを作成できるバンドルを使用して起動しました.これらのバンドルは、ノードモジュール解決アルゴリズムとして知られているものを使用し始めました.そこでは、それは輸入w/o拡張を解決するすべての規則に従います、そしてnode_modules フォルダ.

ラッピング
ちょっと言わせてください.私はネイティブのブラウザesを使うべきではないと言うつもりはありません.私は、あなたがおそらく使用するESモジュールが実際の仕様でないことを指摘しようとしています.

あなたが好きかもしれない他の記事

What is ES6 Tree Shaking?

List of JS Bundlers 🚀