ホームページ >ウェブフロントエンド >jsチュートリアル >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
JS チュートリアル- https://juejin.im/post/5a2e5f0851882575d42f5609
- 推奨チュートリアル: 「
以上がES6 モジュール性と CommonJS モジュール性の違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。