モジュール包装におけるCommon JSとES 6 Moduleの導入と導出問題の詳細

目次

Common JS

Common JSモジュール

Common JSモジュール導出

Common JSモジュール導入

ES 6 Module

ES 6モジュール

ES 6 Module導出

命名導出

デフォルトのエクスポート

ES 6 Module導入

命名導入

デフォルト導入

ハイブリッド導入

複合書き方

Common JS
Common JSモジュールCommonJSでは、各ファイルはモジュールであると規定されています.各モジュールはそれぞれの作用領域を有し、それぞれの作用領域の変数は互いに影響しない.

// calculator.js
var name = 'calculator.js';

// index.js
var name = 'index.js';
require('./calculator.js');
console.log(name); // index.js

ここでは、calculator.jsを導入してindex.js中のnameフィールドを上書きしないことが分かります.これは直接タグでページに するのとは って、タグを した の の が な であり、 および を う にグローバル を するという があります.CommonJSモジュールにカプセル すると、モジュール に するスコープが されます.すべての と は だけでアクセスできます. は えません.
Common JSモジュール
の2つの き は に じです.

module.exports = {
    name: 'calculater',
    add: function(a, b) {
        return a + b;
    }
};

に しい

exports.name = 'calculater';
exports.add = function(a, b) {
    return a + b;
};

その のメカニズムはexportsをmodule.exportsに けたものであり、module.exportsは には のオブジェクトである.CommonJSは、 モジュールのヘッダにデフォルトで のコードを したと に できる.

var module = {
    exports: {},
};
var exports = module.exports;

したがって、exports.addのための は、module.exportsオブジェクトにadd を したものに する. 1:exportsに を えないでください.そうでないと になります. えば:

exports = {
    name: 'calculater'
};

のコードでは、exportsに して け が われており、 しいオブジェクト{name: 'calculater'}を しているが、module.exportsは の のオブジェクトであるため、name は されない.
2:module.exportsをexportsと しないでください.

exports.add = function(a, b) {
    return a + b;
};
module.exports = {
    name: 'calculater'
};

のコードは、exportsを してadd を し、module.exports = { add: function(){...}}に し、module.exportsを のオブジェクトに り てする.これはadd を っていたオブジェクトが われ、 に されたのはnameだけである.
3:エクスポート はモジュールの ではありません.

module.exports = {
    name: 'lcylcy'
};
console.log('end');

module.exportsまたはexportsの のコードはそのまま されます.たとえば、 のconsoleは、コンソール で「end」を ち しますが、 の では、 み り を めるために、 のような き を せずに、module.exportsおよびexports をモジュールの に くべきです.
Common JSモジュール CommonJSにおいて、requireを いてモジュール を う. えば:

// calculator.js
module.exports = {
    add: function(a, b) {return a + b;}
};
// index.js
const calculator = require('./calculator.js');
const sum = calculator.add(2, 3);
console.log(sum); // 5

index.jsにcalculatorモジュールを し、add を び しました.requireモジュールがある 、 つの があります.
1.requireのモジュールは めてロードされます.この はまずモジュールを して、 をエクスポートします.2.requireのモジュールがロードされていた.このモジュールのコードは されません. した を エクスポートします.
の を てください.

// calculator.js
console.log('running calculator.js');
module.exports = {
    name: 'calculator',
    add: function(a, b) {
        return a + b;
    }
};

// index.js
const add = require('./calculator.js').add;
const sum = add(2, 3);
console.log('sum:', sum);
const moduleName = require('./calculator.js').name;
console.log('end');

コンソールの は の りです.

running calculator.js
sum: 5
end

から、 のrequireはcalculator.jsですが、console.log('running calculator.js');は だけ されました.モジュールは、モジュールがロードされたかどうかを するための moduleがあるloadedオブジェクトがあります.その はデフォルトではfalseであり、モジュールが にロードされ、 された にtrueにセットされ、 に ロードされたときにmodule.loadedがtrueであると されたら、モジュールコードは されない.モジュールをロードする もありますが、その されたコンテンツを する はなく、それを することによって、グローバルオブジェクトに するなどの らかの を たしたいだけです.

require('./test.js');

また、require は、この を してモジュールロードパスを に することができます.

const moduleNames = ['foo.js', 'bar.js'];
moduleNames.forEach(name => {
    require('./' + name);
});

ES 6 Module
ES 6モジュールrequireも ファイルを つのモジュールとして しており、 モジュールは の を しており、 なるのは 、 である.ES6 Moduleおよびimportもまた、 キーとしてexportバージョンに わっている(ES6のCommonJSはキーワードに しない).
の を てください. のmoduleとcalculator.jsをindex.jsを って き えました.

// calculator.js
export default {
    name: 'calculator',
    add: function(a, b) {
        return a + b;
    }
};

// index.js
import calculator from './calculator.js';
const sum = calculator.add(2, 3);
console.log(sum); // 5

ES6は、ES6 Module(ES5)において、 に しいモードを する. は、ファイルの にECMAScript 5.0を えるかどうかを することによって、 なモードを することができました.“use strict”では、 にES6 Moduleがあるかどうかに わらず、 なモードを しています. “use strict”であったモジュールまたは なモードを いていないコードをCommonJSに き える 、この に しなければならない.
ES 6 ModuleエクスポートES6 Moduleにおいて、ES6 Moduleコマンドを してモジュールを する.exportには2つの があります.
1. のエクスポート2. エクスポート
きエクスポート
モジュールは の でエクスポートできます. つの いがあります.

//   1
export const name = 'calculator';
export const add = function(a, b) { return a + b; };

//   2
const name = 'calculator';
const add = function(a, b) { return a + b; };
export { name, add };

1の き は の とエクスポートを に くことです.2 は に を い、 じexport で する. つの き の は じです.
を ってエクスポートする 、exportキーワードで の を できます. えば:

const name = 'calculator';
const add = function(a, b) { return a + b; };
export { name, add as getSum }; //        name   getSum

デフォルトのエクスポート
のエクスポートとは なり、モジュールのデフォルトのエクスポートは つしかありません. えば:

export default {
    name: 'calculator',
    add: function(a, b) {
        return a + b;
    }
};

asを にexport defaultという が されたと できますので、ネーミング のように を う がなく、 を き せばいいです.

//      
export default 'This is calculator.js';
//    class
export default class {...}
//       
export default function() {...}

ES 6 Module defaultでは、ES6 Moduleシンタックス モジュールを する.まず、ネーミング きモジュールのロード を ます. の を てください.
のインポート

// calculator.js
const name = 'calculator';
const add = function(a, b) { return a + b; };
export { name, add };

// index.js
import { name, add } from './calculator.js';
add(2, 3);

きエクスポートモジュールをロードする は、 に じてインポートします.importの に された をimportと にくるむ があり、これらの は された と に する がある.
の は、これらの ({ }およびname)が の で されていることに し、これを することはできません.つまり、 されたすべての は み り です.
ネーミング と に、addキーワードによって された の を することができます. えば:

import { name, add as calculateSum } from './calculator.js';
calculateSum(2, 3);

の を する には、 に することもできます. えば:

import * as calculator from './calculator.js';
console.log(calculator.add(2, 3));
console.log(calculator.name);

asを して、 されたすべての を としてimport * as オブジェクトに することができ、これにより、 の に する が される.
インポート

// calculator.js
export default {
    name: 'calculator',
    add: function(a, b) { return a + b; }
};

// index.js
import myCalculator from './calculator.js';
calculator.add(2, 3);

デフォルトのエクスポートには、デフォルトの が であり、の に が けられ、この はimportなどの に されてもよく、myCalculatorにおいてデフォルトで された を す. にはこのように できます.

import { default as myCalculator } from './calculator.js';

ハイブリッドインポート

// index.js
import React, { Component } from 'react';

ここでのcalculator.jsは、モジュールのデフォルト に し、Reactは、その の の つである.
:ここのComponentは、 の に かれていなければなりません. を にしてはいけません.そうでないと、 エラーが されます.
き
き は では、あるモジュールを してすぐに き す があります. えば、すべてのページやコンポーネントを するための り ファイルなどです.この は な き ができます.

export { name, add } from './calculator.js';

に しい

import { name, add } from './calculator.js';
export { name, add };

き は 、 モジュール(ここのReact)によって された で された だけをサポートしています.デフォルトのエクスポートには する がなく、 とエクスポートは のみ です.

import calculator from "./calculator.js ";
export default calculator;

calculator.jsと いてはいけません.

export { default } from calculator;

しかし、このような は として、デフォルトの ではなく、 された はexport default from './calculator.js'である.
:Common JSとES 6 Moduleの な の :
Webpackの : 、 と の み: :ECMAScript 6 ----Moduleの
たちは に します.
=========Talk is chap、show me the code=======================================================================