ES6モジュールの理解-jsチュートリアル-php.cn

Understanding ES6 Modules

ES6モジュール：最新のJavaScriptのモジュラーソリューション

この記事では、ES6モジュールを調査し、翻訳者の助けを借りてそれらを使用する方法を示しています。ほとんどすべての言語には、モジュールの概念があります。これは、別のファイルに宣言された関数を含める方法です。通常、開発者は、関連するタスクを処理するパッケージ化されたコードベースを作成します。ライブラリは、アプリケーションまたは他のモジュールで参照できます。利点は次のとおりです

コードは、より小さな自己完結型ファイルに分割できます。

同じモジュールを任意の数のアプリケーションで共有できます。
理想的には、モジュールは効果的であることが証明されているため、他の開発者が確認する必要はありません。
モジュールを参照するコードは、それが依存関係であることを知っています。モジュールファイルが変更または移動された場合、問題はすぐに表示されます。
モジュールコード（通常）は、命令の競合を排除するのに役立ちます。モジュール1の関数x（）は、モジュール2の関数x（）と競合しません。名前空間などのオプションを使用して、モジュール1.x（）およびmodule2.x（）への呼び出しを変更できます。

JavaScriptのモジュールはどこにありますか？

数年前にWeb開発を開始した人なら誰でも、JavaScriptにモジュールの概念がないことに驚くでしょう。 JavaScriptファイルを別のファイルに直接参照するか、含めることは不可能です。したがって、開発者は他の方法に頼ります。

さまざまなhtml

しかし、これは理想的な計画ではありません：<p> </p> <ul></ul>

各スクリプトは、ページのパフォーマンスに影響する新しいHTTP要求を開始します。 HTTP/2はこの問題をある程度軽減しますが、CDNSなどの他のドメインでスクリプトを参照するのに役立ちません。

各スクリプトは、実行中にさらに処理を一時停止します。

依存関係管理は手動プロセスです。上記のコードでは、lib1.jsがlib2.jsのコードを参照する場合、コードはまだロードされていないために失敗します。これにより、さらにJavaScript処理が損なわれる可能性があります。

関数は、適切なモジュールモードが使用されない限り、他の関数をオーバーライドする場合があります。初期のJavaScriptライブラリは、グローバルな関数名を使用したり、ネイティブメソッドを上書きしたりすることで有名でした。
スクリプトマージ

複数またはインライン：

<🎜>
ログイン後にコピー

モジュールは、ページまたは他のモジュールで何回参照されていても、一度だけ解析されます。

サービスの注意
MIME Type Application/JavaScriptを使用して、
モジュールを提供する必要があります。ほとんどのサーバーはこれを自動的に行いますが、動的に生成されたスクリプトまたは.mjsファイルには注意してください（以下のnode.jsセクションを参照）。レギュラー</pre> <p> <strong> </strong>

モジュールロールバック<script> 标签

HTML 可以使用多个 <script> 标签加载任意数量的 JavaScript 文件：


モジュールをサポートしていないブラウザは、type = "module"スクリプトを実行しません。 Nomoduleプロパティを使用して、モジュール互換のブラウザによって無視されるフォールバックスクリプトを提供できます。たとえば、<🎜>
ログイン後にコピー
ブラウザでモジュールを使用する必要がありますか？ 
ブラウザのサポートは成長していますが、ES6モジュールに切り替えるには時期尚早かもしれません。現在、モジュールパッカーを使用して、どこでも動作するスクリプトを作成するのが最善です。 
node.js でES6モジュールを使用しています
node.jsは2009年にリリースされましたが、実行時にモジュールが提供されていないことは想像もできませんでした。 CommonJSが使用されます。つまり、ノードパッケージマネージャーNPMを開発できます。それ以来、使用量は指数関数的に増加しています。 CommonJSモジュールは、ES2015モジュールと同様の方法でエンコードされています。エクスポートの代わりにモジュール.Exportsを使用してください：
<🎜>
<🎜>
ログイン後にコピー
このモジュールを別のスクリプトまたはモジュールにインポートするために必要な（インポートではなく）使用：
// lib.js
const PI = 3.1415926;

function sum(...args) {
  log('sum', args);
  return args.reduce((num, tot) => tot + num);
}

function mult(...args) {
  log('mult', args);
  return args.reduce((num, tot) => tot * num);
}

// 私有函数
function log(...msg) {
  console.log(...msg);
}

module.exports = { PI, sum, mult };
ログイン後にコピー
要求は、すべてのプロジェクトをインポートすることもできます：
const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24
ログイン後にコピー
node.jsにES6モジュールを簡単に実装するのは簡単ですよね？ 正しくありません。 ES6モジュールは、node.js 9.8.0のフラグの後に配置され、少なくともバージョン10まで完全に実装されません。 CommonJSとES6モジュールには同様の構文がありますが、根本的に異なる方法で動作します。

ES6モジュールは、コードを実行する前に事前に分類されて、さらなるインポートを解析します。 
CommonJSモジュールは、コードを実行するときに依存関係をオンデマンドでロードします。 

上記の例では、これは違いを生みませんが、次のES2015モジュールコードを考慮してください。

ES2015の出力：
const lib = require('./lib.js');

console.log(lib.PI);            // 3.1415926
console.log(lib.sum(1, 2, 3, 4));  // 10
console.log(lib.mult(1, 2, 3, 4)); // 24
ログイン後にコピー
commonjsを使用して記述された同様のコード：
// ES2015 模块

// ---------------------------------
// one.js
console.log('running one.js');
import { hello } from './two.js';
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
export const hello = 'Hello from two.js';
ログイン後にコピー
CommonJSの出力：

<code>running two.js
running one.js
Hello from two.js</code>
ログイン後にコピー
実行順序は、一部のアプリケーションで重要になる可能性がありますが、同じファイルにES2015とCommonJSモジュールを混合するとどうなりますか？この問題を解決するために、node.jsでは、拡張機能.mjsを使用してファイルにES6モジュールを使用することのみが許可されます。拡張機能.JSを備えたファイルは、デフォルトでcommonJSになります。これは、ほとんどの複雑さを削除する簡単なオプションであり、コードエディターとコードインスペクターに役立つはずです。 
// CommonJS 模块

// ---------------------------------
// one.js
console.log('running one.js');
const hello = require('./two.js');
console.log(hello);

// ---------------------------------
// two.js
console.log('running two.js');
module.exports = 'Hello from two.js';
ログイン後にコピー
node.jsでES6モジュールを使用する必要がありますか？ 
ES6モジュールは、node.js v10以降（2018年4月にリリース）でのみ役立ちます。既存のプロジェクトを変換することは、あらゆる利点をもたらす可能性は低く、以前のバージョンのnode.jsとアプリケーションを互換性のないものにすることはありません。新しいプロジェクトの場合、ES6モジュールはCommonJSに代わるものを提供します。構文はクライアントエンコーディングと同じであり、ブラウザまたはサーバーで実行できるIsomorphic JavaScriptの簡単な方法を提供する場合があります。 
モジュール近接
標準化されたJavaScriptモジュールシステムは、出現するのに何年もかかり、実装に時間がかかりましたが、問題は修正されています。 2018年半ばから、すべての主流のブラウザとnode.jsはES6モジュールをサポートしていますが、全員がアップグレードされるときはスイッチング遅延が予想されるはずです。明日のJavaScript開発の恩恵を受けるために、今日ES6モジュールを学びましょう。 
ES6モジュール（FAQ）
に関するFAQ（元のドキュメントのFAQパーツは、完全なテキストが完全に擬似オリジナル化されているため、ここでは省略されています）
以上がES6モジュールの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。