ES モジュールを使用した JavaScript コードの強化: エクスポート、インポート、その他-jsチュートリアル-php.cn

Enhancing JavaScript Code with ES Modules: Export, Import, and Beyond

JavaScript モジュールは、JavaScript コードを整理して再利用する方法です。モジュールを使用すると、コードをより小さく管理しやすい部分に分割でき、必要に応じてアプリケーションの他の部分にインポートして使用できます。このモジュール式のアプローチは、クリーンなコードベースの維持に役立ち、デバッグが容易になり、コードの再利用性が向上します。

ES モジュールと CommonJS の比較

JavaScript エコシステムにはさまざまなモジュールシステムがあります。 ES モジュール (ESM) は ECMAScript 仕様の標準であり、主にブラウザで使用され、Node.js でのサポートが増えています。 CommonJS は、Node.js で伝統的に使用されていたもう 1 つのモジュールシステムです。

ESモジュール(ESM)

ES モジュール (ESM) は、ECMAScript 2015 (ES6) で導入された JavaScript の標準化されたモジュールシステムです。異なるファイル間で関数、オブジェクト、プリミティブのインポートとエクスポートを可能にすることで、コードの編成と再利用性が向上します。このモジュールシステムは、ブラウザや Node.js などの最新の JavaScript 環境で広くサポートされています。

エクスポートとインポート

export キーワードは、現在のモジュールの外部からアクセスできる変数と関数にラベルを付け、アプリケーションの他の部分で再利用できるようにします。 import キーワードを使用すると、これらの機能を他のモジュールからインポートできるため、モジュール式プログラミングとコードの再利用が可能になります。

名前付きエクスポートを使用すると、モジュールから複数の項目をエクスポートできます。各項目は、エクスポートされたときと同じ名前でインポートする必要があります。

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

ログイン後にコピー

名前付きエクスポートをインポートする場合は、エクスポートと同じ名前を使用する必要があります。

import { greet } from './module.js';
greet(); // Hello, World!

ログイン後にコピー

デフォルトのエクスポートでは、モジュールごとに 1 つのデフォルトのエクスポートが可能です。アイテムは任意の名前でインポートできます。

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

ログイン後にコピー

デフォルトのエクスポートをインポートするときは、任意の名前を使用できます。

import message  from './module.js';
message(); // Hello, World!

ログイン後にコピー

HTML でのモジュールの使用

ブラウザでモジュールを使用する場合は、モジュールを HTML ファイルに含める必要があります。

人気のチュートリアル

詳細>

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

ES モジュールを使用した JavaScript コードの強化: エクスポート、インポート、その他

ES モジュールと CommonJS の比較

ESモジュール(ESM)