JavaScript での require と import-jsチュートリアル-php.cn

JavaScript での require と import

王林

リリース： 2024-08-16 06:12:13

オリジナル

1017 人が閲覧しました

require Vs import In JavaScript

コーディングを始めたとき、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) とは何ですか?

ECMAScript としても知られる ES6 は、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() よりも読みやすく、開発者のエクスペリエンスが向上します。私たちは皆それを望んでいます!