Node.jsでインポートとエクスポートを使用する方法

インポートとエクスポートは es6 のモジュール式インポートとエクスポートであり、この段階では node.js でサポートされていません。node.js のモジュール式コードに変換するには、babel を介してコンパイルする必要があります。 (node.jsモジュールについては他のnode.jsモジュール記事を参照してください) この記事では主にnode.jsのインポートとエクスポートの使い方について詳しく紹介していますので、編集者がかなり良いと思ったので共有します。ぜひ参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

エクスポートの公開

エクスポートを使用すると、次のコードに示すように、メソッド、オブジェクト、文字列などを公開できます

//写法1
export var foo=function(){
  console.log(1);
}
//写法2
var bar ={a:"1",b:2};
export {bar};
//写法3
var baz='hello world';
export {baz as qux};

その後、babelによってコンパイルされた後、上記のコードは実行可能なノードになります。 jsコードは以下の通り

"use strict";
//标记这个模块是es的模块
Object.defineProperty(exports, "__esModule", {
  value: true
});
//写法1
var foo = exports.foo = function foo() {
  console.log(1);
};
//写法2
var bar = { a: "1", b: 2 };
exports.bar = bar;
//写法3

var baz = 'hello world';
exports.qux = baz;

上記のコードを見ると、es6のエクスポートがnode.jsのエクスポートの公開方法に変換されることが分かります。

importインポート

importの書き方を見てみましょう

上でexportが書かれているファイルxx.jsを紹介します

最初の書き方

import {foo,qux} from './xx';
console.log(qux);

foo、quxはxxで公開されます。 .js xx.js で公開される属性には、foo、bar、および qux が含まれます。この記述方法では、インポートされたファイルで公開される属性の名前を知っている必要があり、すべてを列挙することなく、必要に応じて記述できることがわかります。属性。

Babel でコンパイルされたコードを見てみましょう:

'use strict';
var _ = require('./xx');
console.log(_.qux);

は xx.js を導入する単純な require メソッドなので、この方法で es6 モジュールまたは Node.js Modular を導入できます。

2 番目の書き方

import * as xx from './xx';
console.log(xx.bar);

ここでも xx.js を紹介します。この書き方では、xx.js で公開されているすべての属性を変数 xx に割り当てます (実際には module.exports にエイリアスを与えます)。をbabelでコンパイルすると以下のようになります。

'use strict';
var _ = require('./xx');
var xx = _interopRequireWildcard(_);
function _interopRequireWildcard(obj) {
  //判断是node模块还是es模块
  if (obj && obj.__esModule) {
    return obj;
  }
  else {
    var newObj = {};
    if (obj != null) {
      for (var key in obj) { 
        if (Object.prototype.hasOwnProperty.call(obj, key)) 
         newObj[key] = obj[key];
      }
    }
  //兼容旧的babel编译
    newObj.default = obj;
    console.log(newObj);
    return newObj;
  }
}
console.log(xx.bar);

上記のコードを見て、nodeモジュールなのかesモジュールなのかを判断する方法があります。 この書き方はesモジュールやesモジュールにも対応しています。ノードモジュール。

3 番目の書き方

import oo from './xx'
console.log(oo.bar);

この書き方では、oo は一見、2 番目の書き方と同じように見えるかもしれませんが、実際には違います。コンパイルされたコードを見てみましょう:

'use strict';
var _ = require('./xx');
var _2 = _interopRequireDefault(_);
function _interopRequireDefault(obj) { 
 return obj && obj.__esModule ? obj : 
 { default: obj }; 
}
console.log(_2.default.bar);

最後の行では、oo.bar が _2.default.bar にコンパイルされます。デフォルトでは、もちろんここのバーは見つからないので、この使用法は次のようになります。エクスポート属性の導入には使用されませんが、後述するエクスポートのデフォルトが使用されます。

エクスポートデフォルトは一度に公開されます

エクスポートとエクスポートデフォルトについては別の記事でまとめますここではエクスポートデフォルトの使い方についてのみ説明します。

var foo=123;
export default foo;

babel

"use strict";
Object.defineProperty(exports, "__esModule", {
 value: true
});
var foo = 123;
exports.default = foo;

によってコンパイルされた後、fooの最後の行がexports.defaultに割り当てられることがわかります。これは、defaultを呼び出す「./xx」からのインポートooに対応します。 . プロパティがあるため、これら 2 つの用途はそれに応じて使用されます。属性の値はexports.defaultに代入されるので、以下のような使い方ができます

export default 123;

export default {foo:123};

export default function f(){}

export default function (){}

上記のコードはYouだけなので別途記述しますmodule.exports を使用するのと同じ理由で、エクスポート デフォルトを 1 回だけ使用できます。また、複数の記述ができないことに加えて、次のような間違った記述方法もあります:

export default var foo=123; //错误

export デフォルトも使用できます。クラスを公開するため、ここでは詳しく説明しませんが、それらはすべて公開されています。

その他の使用法

継承

これはモジュール継承と呼ばれ、実際には親モジュールがサブモジュールを導入し、サブモジュールの公開属性を公開します:

export * from './xx';

'use strict';
Object.defineProperty(exports, "__esModule", {
 value: true
});
var _ = require('./xx');
Object.keys(_).forEach(function (key) {
 if (key === "default" || key === "__esModule") return;
 Object.defineProperty(exports, key, {
  enumerable: true,
  get: function get() {
   return _[key];
  }
 });
});

の後、次の文に注目してください

if (key === "default" || key === "__esModule") return;

default属性は外部に公開されていません...これは、導入したxx.jsファイルでのexportsdefaultの使用が無効であることを示しています。代替の書き方は

export {default} from './xx';

継承の書き方は複数のモジュールをまとめるのによく使われ、下記の導入パッケージと併用されることが多いです

誘導フォルダ(導入パッケージ)

多くの人次のコード行が理解できません

import * as o from './oo'; //oo是个文件

インポートでフォルダーが導入されるのはなぜですか? その中の少なくとも 1 つのファイルが、index.js または package.json と別の名前の js であるわけではないことに注意してください。フォルダー内にindex.jsがあるため、このフォルダーはnode.jsパッケージです(詳細については、インポートはrequireにコンパイルされます)。したがって、import はフォルダー内の他のファイルのコードをエクスポートするために、次のようにすることができます。 oo フォルダーをインポートすることで 1.js および 2.js で公開される属性。

概要

babelでコンパイルされたコードを見ると、exportとexports、module.exportsとexportdefaultの使用法が似ていることがわかります。何をどのように使用するかについては、個人の好みに依存します。

関連する推奨事項:

JavaScript ES6のエクスポートインポートとエクスポートデフォルトの使用法と違いの詳細な説明

以上がNode.jsでインポートとエクスポートを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。