Node での require および import の使用方法の詳細な紹介

この記事では主にNodeのインポートモジュールのrequireとimportの違いについて詳しく説明していますので、興味のある方は参考にしてください。

ES6規格がリリースされてからは、exportコマンドでインターフェースをエクスポートし、importでモジュールを導入するのが標準的な使い方になりましたが、通常のnodeモジュールでは、requireを使用する仕様を採用しています。モジュールを導入し、モジュールのエクスポート インターフェイスを使用します。

require と import をクリアしないと、将来の標準プログラミングでは醜くなります。

require 時代のモジュール

ノード プログラミングで最も重要なアイデアの 1 つはモジュールであり、このアイデアによって大規模な JavaScript プロジェクトが可能になります。 jsの世界ではモジュラープログラミングが流行しており、その後ブラウザ側でもrequirejsやseajsなどのツールキットが登場し、ES6以前のモジュラープログラミングはrequireが主流になったと言えます。 、現在でも、ES6 モジュールが完全に実装されるまではこれが当てはまります。

Node のモジュールは CommonJS 仕様に従い、requirejs は AMD に従い、seajs は CMD に従います。それらは異なりますが、比較的統一されたコード スタイルを維持したいと考えています。

// a.js // -------- node ----------- module.exports = { a : function() {}, b : 'xxx' }; // ----------- AMD or CMD ---------------- define(function(require, exports, module){ module.exports = { a : function() {}, b : 'xxx' }; });

スタイルの高度な統一性を維持するために、ブラウザ側モジュールで定義関数を使用してモジュールのクロージャを提供することを除いて、他のコードは完全に一貫していることがわかります。

// b.js // ------------ node --------- var m = require('./a'); m.a(); // ------------ AMD or CMD ------------- define(function(require, exports, module){ var m = require('./a'); m.a(); });

も使い方はよく似ています。 AMD または CMD はより豊富なスタイルを提供しますが、この記事では主にノード環境について説明するため、拡張しません。

ES6 のモジュール

ES6 によってリリースされたモジュールは CommonJS を直接使用しておらず、require も使用していません。つまり、require は依然としてノードのプライベート グローバル メソッドであり、module.exports はノードのプライベート メソッドにすぎません。 . グローバル変数の属性は、標準の 0.5 セントとは何の関係もありません。

export エクスポート モジュール インターフェイス

エクスポートの使用法は非常に複雑です。詳細はここで確認できます。以下にいくつかの例を示します:

// a.js export default function() {} export function a () {} var b = 'xxx'; export {b}; // 这是ES6的写法，实际上就是{b:b} setTimeout(() => b = 'ooo', 1000); export var c = 100;

エクスポートするインターフェイスの前に、export コマンドを追加します。

エクスポート後に b を変更することもできますが、これは CommonJS とは大きく異なります。内部の仕組みについては、この記事では恥ずかしげもなく省略します。

次の構文には重大なエラーがあることに注意してください:

// 错误演示 export 1; // 绝对不可以 var a = 100; export a;

インターフェイスをエクスポートするときは、モジュール内の変数と 1 対 1 対応する必要があります。 1 を直接エクスポートするのは意味がなく、インポート時にそれに対応する変数を持つことは不可能です。 export a は有効に見えますが、a の値は数値でありまったく分解できないため、export {a} の形式で記述する必要があります。関数に を割り当てても許可されません。さらに、ほとんどのスタイルでは、モジュールの最後でエクスポートを使用してすべてのインターフェイスをエクスポートするのが最善であると示唆しています。たとえば、次のようになります。 import はファイルの先頭に配置する必要があり、他のロジック コードを前に置くことはできません。これは、他のすべてのプログラミング言語のスタイルと一致しています。

インポートの使用方法はエクスポートと同じであり、非常に複雑です。ここで一般的な理解を得ることができます。いくつかの例を挙げると:

export {fun as default,a,b,c};

インポートの後に中括弧を続ける形式は、中括弧内の変数がエクスポート後の変数に対応する最も基本的な使用法です。ここでは、オブジェクトの構造化と代入の知識を理解する必要があります。この知識がなければ、ここで披露することはできません。構造化代入を理解すると、ここでの「1対1対応」関係が詳しく理解できるようになります。

import $ from 'jquery'; import * as _ from '_'; import {a,b,c} from './a'; import {default as alias, a as a_a, b, c} from './a';

上記のコードは、エクスポートされると、外部に提供されるインターフェイスが楽しくなります。これは、 a 内の a 関数のエイリアスです。 js ですが、モジュールの外で、a を認識できなければ、fun しか認識できません。import の as は非常に簡単です。モジュール内でメソッドを使用する場合、現在のファイルで使用できるようにメソッドにエイリアスを与えます。その理由は、2 つの異なるモジュールが同じインターフェイスを渡す場合があるためです。たとえば、楽しいインターフェイスも渡す c.js があります。 2 つのモジュール c では、インターフェース名が重複する問題を解決する方法を見つける必要があります。

// a.js var a = function() {}; export {a as fun}; // b.js import {fun as a} from './a'; a();

インポートの場合、次のように使用できます:

// c.js export function fun() {};

この構文糖衣の利点import の場合、中括弧 {} を省略できます。簡単に言うと、インポート時に変数が中括弧で囲まれていない (* 記号がない) ことに気付いた場合は、頭の中で中括弧を含む as 構文に戻す必要があります。

所以，下面这种写法你也应该理解了吧：

import $,{each,map} from 'jquery';

import后面第一个 $ 是 {defalut as $} 的替代写法。

*符号

*就是代表所有，只用在import中，我们看下两个例子：

import * as _ from '_';

在意义上和 import _ from '_'; 是不同的，虽然实际上后面的使用方法是一样的。它表示的是把 '_' 模块中的所有接口挂载到 _ 这个对象上，所以可以用 _.each调用某个接口。

另外还可以通过*号直接继承某一个模块的接口：

export * from '_'; // 等效于： import * as all from '_'; export all;

*符号尽可能少用，它实际上是使用所有export的接口，但是很有可能你的当前模块并不会用到所有接口，可能仅仅是一个，所以最好的建议是使用花括号，用一个加一个。

该用require还是import？

require的使用非常简单，它相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量，相当于把require和module.exports进行平行空间的位置重叠。

而且require理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用，比如：

require('./a')(); // a模块是一个函数，立即执行a模块函数 var data = require('./a').data; // a模块导出的是一个对象 var a = require('./a')[0]; // a模块导出的是一个数组

你在使用时，完全可以忽略模块化这个概念来使用require，仅仅把它当做一个node内置的全局函数，它的参数甚至可以是表达式：

require(process.cwd() + '/a');

但是import则不同，它是编译时的（require是运行时的），它必须放在文件开头，而且使用格式也是确定的，不容置疑。它不会将整个模块运行后赋值给某个变量，而是只选择import的接口进行编译，这样在性能上比require好很多。