フロントエンド開発環境Webパッケージ(1)

「Webパッケージについて学ぶには...」「Postingを…」と決意しましたが、そのまま数ヶ月が過ぎてしまいました.
今から勉強と位置づけ📌

1.登場背景

ネットワークパッケージの背景を詳しく説明しましょう.前述したように、初期のjavascriptでは、スクリプトとして大きな機能を実現することは期待されていません.ブラウザを起動するために非常に小さな機能を作っただけです.しかし,Webの比重が増大するにつれてjsの役割はますます大きくなり,コードもますます長くなり,ファイルもますます多くなる.
これにより,機能別にファイルを分割・管理する必要性が生じる.
ここからモジュールの概念を導入する
サポートモジュールの開始はES 2015からです.import/export構文がないモジュールの移行状況を理解します.
src/math.js

function sum(a, b) {
  return a + b;
}

src/app.js

sum(1,2); // 3

この2つのファイルを1つのHTMLファイルからロードしてこそ実行できます.
index.html

🚨 問題は、このsumという関数がグローバル空間に露出することである.他のファイルでもsumという名前を使用すると競合します.

1.1 IIFE方式

このような問題を予防するためにスキャナーを利用した.つまり、スキャナーを作り、外から内への接近を防ぐ.
src/math.js

var math = math || {}; // namespace

(function (){
  function sum(a,b) {
    return a + b;
  }
  math.sum = sum;
})();

同じコードは即時実行関数に囲まれているため、他のファイルからアクセスできません.グローバルに登録されたmathネーミングスペースをうまく利用すれば,モジュール化が可能である.

1.2豊富なモジュール仕様

AMDとCommonJSはモジュール仕様を提供します.
CommonJSの目的は、JavaScriptを使用するすべての環境でモジュールを提供することです.
モジュールをexportsにエクスポートし、requireとしてロードします.
src/math.js

exports function sum(a,b) { return a + b;}

src/app.js

const math = require('./math.js');
math.sum(1,2); // 3

AMDの目的は、非同期ロード環境でモジュールを使用することです.
UMDはAMDに基づいており、CommonJS方式をサポートする統合形式でもある.
このように,各コミュニティはそれぞれの規格を提案し,ES 6は標準モジュールシステムを導入した.現在,バーベルやWebパッケージを用いてモジュールを使用することが一般的になっている.
src/math.js

export function sum(a,b){
  return a + b;
}

src/app.js

import * as math from "./math.js"
math.sum(1, 2); // 3

1.3ブラウザのモジュールサポート

Internet Explorerではモジュールはサポートされていませんが、すぐに閉じます.👍 ほとんどはChromeブラウザを使用しており、Chromeはモジュールシステムをサポートしています.
index.html

<script type="module" src="app.js"></script>

scriptラベルをロードする場合は、type="text/javascript"の代わりにtype="module"を使用します.
ブラウザに関係のないモジュールを使いたいのですが...
このとき使うのはWebパッケージです
詳しくは次編でご紹介します.
金正煥のブログに基づいて作成されたロケーション.