JavaScript での import と require の違いを比較する-jsチュートリアル-php.cn

JavaScript での import と require の違いを比較する

巴扎黑

リリース： 2017-08-15 10:19:00

オリジナル

1902 人が閲覧しました

この記事では、Javascript (es2016) の import と require の詳細な使い方と違いを主に紹介します。興味がある場合は、さらに詳しく学ぶことができます。 import して require します。全員と共有します。詳細は次のとおりです。

名前が lib.js であると仮定して、単純な js ファイルを作成します。内容は次のとおりであるとします。

export const sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}

ログイン後にコピー

このように、lib で定義されたプロパティとメソッドは、他の場所から参照できます。 import と require の 2 つの参照メソッドがあります。

//方法一
import { square, diag } from &#39;lib&#39;;
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法儿
import * as lib from &#39;lib&#39;;
square = lib.square;

ログイン後にコピー

デフォルトのエクスポート情報を設定することもできます。これには、lib.js でエクスポートのデフォルト {} を定義する必要があります。デフォルトの後にパラメータまたは配列を続けることができます。書き方は次のとおりです:

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

ログイン後にコピー

通常、最初の方法を使用するのが一般的です。次に、import を使用してこの配列またはパラメーターを取得します。ただし、インポートは静的インポートにのみ使用できます。つまり、インポートはファイルの先頭の最上位に書き込む必要があります。そして、require は動的読み込みを実現できます。

ロード方法ランタイムロードコンパイル時にロード

仕様	コマンド	機能
CommonJS/AMD	が必要	コミュニティソリューションサーバー/ブラウザのモジュール読み込みスキームを提供します。非言語的な標準。モジュールの依存関係と入出力変数は実行時にのみ決定でき、静的な最適化は実行できません。
ESMAScript6+	import	言語仕様レベルでモジュール関数をサポートします。コンパイル時の静的解析をサポートしているため、JS へのマクロの導入と型チェックが容易になります。動的バインディング。