ES6モジュールの理解

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

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

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

1. 同じモジュールを任意の数のアプリケーションで共有できます。
2. 理想的には、モジュールは効果的であることが証明されているため、他の開発者が確認する必要はありません。
3. モジュールを参照するコードは、それが依存関係であることを知っています。モジュールファイルが変更または移動された場合、問題はすぐに表示されます。
4. モジュールコード（通常）は、命令の競合を排除するのに役立ちます。モジュール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ライブラリは、グローバルな関数名を使用したり、ネイティブメソッドを上書きしたりすることで有名でした。

スクリプトマージ

複数またはインライン：

<code class="language-html"></code>

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

サービスの注意

MIME Type Application/JavaScriptを使用して、

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

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

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

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

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

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

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

module.exports = { PI, sum, mult };&lt;/code&gt;</pre>
<p>要求は、すべてのプロジェクトをインポートすることもできます：</p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;const { sum, mult } = require('./lib.js');

console.log(sum(1, 2, 3, 4));  // 10
console.log(mult(1, 2, 3, 4)); // 24&lt;/code&gt;</pre>
<p>node.jsにES6モジュールを簡単に実装するのは簡単ですよね？ <em>正しくありません</em>。 ES6モジュールは、node.js 9.8.0のフラグの後に配置され、少なくともバージョン10まで完全に実装されません。 CommonJSとES6モジュールには同様の構文がありますが、根本的に異なる方法で動作します。
</p>
<ul>ES6モジュールは、コードを実行する前に事前に分類されて、さらなるインポートを解析します。 <li>
</li>CommonJSモジュールは、コードを実行するときに依存関係をオンデマンドでロードします。 <li>
</li>
</ul>上記の例では、これは違いを生みませんが、次のES2015モジュールコードを考慮してください。
<p>
ES2015の出力：</p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;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&lt;/code&gt;</pre>
<p>commonjsを使用して記述された同様のコード：</p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// 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';&lt;/code&gt;</pre>
CommonJSの出力：<p>
</p>
<pre class="brush:php;toolbar:false">&lt;code&gt;running two.js
running one.js
Hello from two.js&lt;/code&gt;</pre>実行順序は、一部のアプリケーションで重要になる可能性がありますが、同じファイルにES2015とCommonJSモジュールを混合するとどうなりますか？この問題を解決するために、node.jsでは、拡張機能.mjsを使用してファイルにES6モジュールを使用することのみが許可されます。拡張機能.JSを備えたファイルは、デフォルトでcommonJSになります。これは、ほとんどの複雑さを削除する簡単なオプションであり、コードエディターとコードインスペクターに役立つはずです。 <p>
</p>
<pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// 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';&lt;/code&gt;</pre>node.jsでES6モジュールを使用する必要がありますか？ <p></p>
<p>ES6モジュールは、node.js v10以降（2018年4月にリリース）でのみ役立ちます。既存のプロジェクトを変換することは、あらゆる利点をもたらす可能性は低く、以前のバージョンのnode.jsとアプリケーションを互換性のないものにすることはありません。新しいプロジェクトの場合、ES6モジュールはCommonJSに代わるものを提供します。構文はクライアントエンコーディングと同じであり、ブラウザまたはサーバーで実行できるIsomorphic JavaScriptの簡単な方法を提供する場合があります。 <strong>
</strong></p>モジュール近接<p></p>
<p>標準化されたJavaScriptモジュールシステムは、出現するのに何年もかかり、実装に時間がかかりましたが、問題は修正されています。 2018年半ばから、すべての主流のブラウザとnode.jsはES6モジュールをサポートしていますが、全員がアップグレードされるときはスイッチング遅延が予想されるはずです。明日のJavaScript開発の恩恵を受けるために、今日ES6モジュールを学びましょう。 <strong>
ES6モジュール（FAQ）</strong></p>に関するFAQ<p><strong>（元のドキュメントのFAQパーツは、完全なテキストが完全に擬似オリジナル化されているため、ここでは省略されています）</strong></p>

以上がES6モジュールの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。