コーディングを始めたとき、require() を使用してモジュールやインポートを使用して他のファイルをインポートするいくつかの js ファイルを見たことを覚えています。何が違うのか、なぜプロジェクト間で一貫性がないのかがよくわからず、いつも混乱していました。同じことを疑問に思っている場合は、読み続けてください!

CommonJSとは何ですか?

CommonJS は、サーバーサイド JavaScript (主に Node.js 環境) でモジュールを実装するために使用される標準のセットです。このシステムでは、モジュールは同期的にロードされます。つまり、モジュールがロードされるまでスクリプトの実行はブロックされます。これは簡単なアプローチになりますが、多数の異なるモジュールをロードしようとすると、他のモジュールを実行する前に次々にロードする必要があるため、パフォーマンスが低下するという欠点があります。

CommonJS を使用する場合、module.exports を使用して機能をエクスポートし、require() を使用してインポートします。

これがコードでどのようになるかを示す例です。

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

ECMAScript (ES6) とは何ですか?

ES6 (ECMAScript とも呼ばれます) は、2015 年にリリースされた JavaScript の新しいバージョンです。このリリースでは、import ステートメントと export ステートメントを使用してモジュールを非同期にインポートする機能が追加されました。これは、実行中のスクリプトはモジュールのロード中も実行を継続できるため、ボトルネックが発生しないことを意味します。これにより、後の投稿で説明するツリーシェイキングと呼ばれる効率化も可能になりますが、基本的に、これは、使用しているモジュールから JavaScript をロードするだけであり、デッドコード (使用されていないコード) はロードされないことを意味します。ブラウザに。 ES6 は静的インポートと動的インポートの両方をサポートしているため、これがすべて可能です。

これは前と同じ例ですが、今回はインポートとエクスポートを使用しています。

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

主な違い: require と import

require() は CommonJS モジュール システムの一部ですが、import は ES6 モジュール システムの一部です。主にまだ ES6 を採用していないレガシー プロジェクトで、サーバーサイド開発用の Node.js 環境で require() が使用されているのがわかります。サーバーサイド開発とフロントエンド開発の両方、特に新しいプロジェクトや React や Vue などのフロントエンド フレームワークでインポートが使用されていることがわかります。

import が require よりも優れているのはなぜですか?

前述したように、インポートは非​​同期であるため、特に大規模なアプリケーションではパフォーマンスの向上につながる可能性があります。また、インポートは静的に分析できるため、リンターやバンドラーなどのツールはコードをより効果的に最適化し、ツリー シェイクを実装することでバンドル サイズを小さくし、読み込み時間を短縮できます。構文も require() よりも読みやすく、開発者のエクスペリエンスが向上します。私たちは皆それを望んでいます!

require と import を使用する場合

次の場合に require() を使用します:

• あなたは、ES6 がリリースされる前に開始され、更新されていない従来の Node.js プロジェクトに取り組んでいます。

• 構成ファイルなどでモジュールを実行時に動的にロードする必要がある場合、または条件付きでモジュールをロードする必要がある場合。

インポートは次の場合に使用します:

• これが現在標準であり、より効率的であるため、他の時間でも使用できます。

まとめ

一般に、インポートの方がより多くの利点があり、より新しく、より広く採用されているモジュール システムであるため、可能な限りインポートを使用することをお勧めします。ただし、特定の要件や作業している環境によっては、require() のほうがより良い選択となる場合もあります。

この記事が役立つと思われた場合は、ニュースレターを購読してください。このようなコンテンツを毎週あなたの受信箱に直接送信します。