ES6 モジュール性と CommonJS モジュール性の違いの詳細な説明

ES6 モジュール化と CommonJS モジュール化の違い

最近のプロジェクトでは、 ES6 CommonJS での module.exports と require の使い方で迷っているので、今日はそれをまとめてみましたので、もし間違っているところがあればアドバイスをお願いします。

ES6 モジュール性

import コマンドは、他のモジュールによって提供される関数をインポートするために使用されます;exportコマンドは、モジュールの外部インターフェイスを指定するために使用されます。

1. インポートとエクスポート

// 导出 a.js

/** 写法一 **/
var name = 'sheep'
function getSheep() {
    name = 'hourse'
}
export {getSheep}

// 引入 b.js
import {getSheep} from '.／a.js'


/** 写法二 **/
var name = 'sheep'
export function getSheep() {
    name = 'hourse'
}

// 引入 b.js

import {getSheep} from '.／a.js'

2. インポートとエクスポートのデフォルト

複数のエクスポートが可能です。エクスポートのデフォルトは

// 导出 a.js
let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

export default obj

// 引入 b.js

import obj from './a.js'

CommonJS モジュール性

1 は 1 つだけです。require と module.exports

require ES6 (bable は import を require に変換します) と CommonJS の両方でサポートされています

// 导出 a.js

let obj = {
    name: 'hello',
    getName: function (){
        return this.name
    }

module.exports = obj

// 引入 b.js

let obj = require('./a.js')

summary

• ##ES6 モジュール体系を使用していても、Babel の変換を使用すると、最終的に ES6 モジュール体系は CommonJS 仕様に変換されます。

• Babel5 で require を使用する場合、インポートされる値は module.export によって返される値、またはエクスポートのデフォルトによって返される値です。

• Babel6ではimportを使って導入する場合、exportのdefaultの値を直接取得できますが、requireでインポートしたコンポーネントの場合、exportがmodule.exportであろうとexportであろうと、 、またはエクスポートのデフォルト値を直接取得できます。エクスポートのデフォルト値を取得するには、デフォルトを追加する必要があります。

# 参考:

#https://www.jianshu.com/p/27ee06296bcd

• https://juejin.im/post/5a2e5f0851882575d42f5609
推奨チュートリアル: 「

JS チュートリアル

以上がES6 モジュール性と CommonJS モジュール性の違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。