CommonJs と Es モジュールについて簡単に説明します。違いは何ですか?

CommonJs および Es モジュールとは何ですか?違いは何ですか?次の記事では、CommonJs と Es Module の概要とその違いについて説明します。

CommonJs および Es モジュールがあるのはなぜですか?

初期の頃は誰もが知っていました JavaScript module 概念は、script タグ js ファイル コードを通じて導入されます。もちろん、これらの基本的な単純な要件を記述することに問題はありませんが、プロジェクトがますます大きくなると、導入する js ファイルが増え、次の問題が発生します。

• js ファイルのスコープはすべてトップレベルであるため、さまざまな汚染が発生します。
• js ファイルが多数あるため、保守が困難です。
• Js ファイルの依存関係の問題が発生する場合、順序に注意しないと、エラーが発生します。すべてのコードがエラーを報告します

上記の問題を解決するには、JavaScriptコミュニティが登場しましたCommonJs ,CommonJs はモジュール仕様であり、現在の NodeJs も CommonJs 構文の一部を使用しています。その後、Es6 バージョンで Es Module モジュールが正式に追加されました。これら 2 つは両方とも上記の問題を解決します。では、どのような問題が解決されるのでしょうか?

• 変数汚染の問題を解決します。各ファイルは独立したスコープであるため、変数汚染はありません。
• コードのメンテナンスの問題を解決します。1 つのファイル内のコードは非常に明確です。
• ファイルの依存関係の問題を解決します。あるファイルに他のどのファイルが依存しているかを明確に確認できます。

次に、その構文と欠点について 1 つずつ学びましょう

CommonJs の基本構文

Export

CommonJs モジュールで使用.exports変数と関数をエクスポートし、任意のタイプの値もエクスポートできます。次のケースを参照してください。

// 导出一个对象
module.exports = {
    name: "蛙人",
    age: 24,
    sex: "male"
}

// 导出任意值
module.exports.name = "蛙人"
module.exports.sex = null
module.exports.age = undefined

直接エクスポート

エクスポートの

module キーワードを省略したり、エクスポートの際にエクスポートを直接記述したりすることもできます。次のケースを参照してください。

exports.name = "蛙人"
exports.sex = "male"

注: エクスポートを使用して単一の値をエクスポートする場合、オブジェクト値をエクスポートすることはできません。これにより、エクスポートのオブジェクトの変更のみが変更されます。ただし、変更は無効です。最終的なエクスポートは次のとおりです。最終的なエクスポートは module.exports によって決定されるため、名前と性別はそのままです。

exports.name = "蛙人"
exports.sex = "male"
exports = {
    name: "蛙人"
}

上記の例では、この状況によりオブジェクトの参照値が変更され、エクスポートが無効になるため、最終的なエクスポートは依然として

name, sex です。 。

混合エクスポート

混合エクスポート、

exports および module.exports は問題なく同時に使用できます。

exports.name = "蛙人"
module.exports.age = 24

Import

CommonJs は、必要に応じて、require 構文を使用してインポートできます。単一の値は、オブジェクトを構造化することで取得できます。

// index.js
module.exports.name = "蛙人"
module.exports.age = 24

let data = require("./index.js")
console.log(data) // { name: "蛙人", age: 24 }

繰り返しインポート

CommonJs または Es Module であっても、繰り返しインポートされることはありません。つまり、ファイルがある限り、このファイルは一度ロードしましたが、再度インポートしても有効になりません。

let data = require("./index.js")
let data = require("./index.js") // 不会在执行了

動的インポート

CommonJs は動的インポートをサポートしています。これはどういう意味ですか? require を使用できることを意味します。文法については、次の場合を見てください。

let lists = ["./index.js", "./config.js"]
lists.forEach((url) => require(url)) // 动态导入

if (lists.length) {
    require(lists[0]) // 动态导入
}

インポートされた値の変更

CommonJsインポートされた値はコピーされるため、コピーされた値を変更できますが、これにより変数汚染が発生します。 . 偶然同じ名前になってしまいました。

// index.js
let num = 0;
module.exports = {
    num,
    add() {
       ++ num 
    }
}

let { num, add } = require("./index.js")
console.log(num) // 0
add()
console.log(num) // 0
num = 10

上記の例では、

exports エクスポートされた値が値のコピーであることがわかります。変更後、 num 値は変更されておらず、インポートされた num

summary

#CommonJsResolves 変数汚染の値を変更することもできます。質問、上で基本的な構文も紹介しましたが、これは動的にインポートできます (コードは実行時に発生します) が、繰り返しインポートすることはできません。

Es モジュールの基本構文

Export

In

Es モジュールエクスポートにはシングルエクスポート(export)とデフォルトエクスポート(exportdefault)の2種類があり、シングルエクスポートはCommonJsのような値を直接インポートしません。インポートすると、必要な値を Es Module にインポートできます。次に、デフォルトのエクスポートでは、すべてを直接インポートします。もちろん、任意のタイプの値を Es Module でエクスポートすることもできます。

// 导出变量
export const name = "蛙人"
export const age = 24

// 导出函数也可以
export function fn() {}
export const test = () => {}


// 如果有多个的话
const name = "蛙人"
const sex = "male"
export { name, sex }

混合エクスポート

export と exportdefault は、相互に影響を与えることなく同時に使用できます。インポートのみが必要 ファイル内にインポートが混在している場合は、デフォルトのエクスポートを最初にインポートし、次に単一のインポート値をインポートする必要があることに注意してください。

export const name = "蛙人"
export const age = 24

export default {
    fn() {}，
    msg: "hello 蛙人"
}

インポート

Es Module使用的是import语法进行导入。如果要单个导入则必须使用花括号{} ，注意：这里的花括号跟解构不一样。

// index,js
export const name = "蛙人"
export const age = 24

import { name, age } from './index.js'
console.log(name, age) // "蛙人" 24

// 如果里面全是单个导出，我们就想全部直接导入则可以这样写
import * as all from './index.js'
console.log(all) // {name: "蛙人", age: 24}

混合导入

混合导入，则该文件内用到混合导入，import语句必须先是默认导出，后面再是单个导出，顺序一定要正确否则报错。

// index,js
export const name = "蛙人"
export const age = 24
export default {
    msg: "蛙人"
}

import msg, { name, age } from './index.js'
console.log(msg) // { msg: "蛙人" }

上面example中，如果导入的名称不想跟原本地名称一样，则可以起别名。

// index,js
export const name = "蛙人"
export const age = 24
export default {
    msg: "蛙人"
}

import { default as all,  name, age } from './index.js'
console.log(all) // { msg: "蛙人" }

导入值的变化

export导出的值是值的引用，并且内部有映射关系，这是export关键字的作用。而且导入的值，不能进行修改也就是只读状态。

// index.js
export let num = 0;
export function add() {
    ++ num
}

import { num, add } from "./index.js"
console.log(num) // 0
add()
console.log(num) // 1
num = 10 // 抛出错误

Es Module是静态

就是Es Module语句``import只能声明在该文件的最顶部，不能动态加载语句，Es Module`语句运行在代码编译时。

if (true) {
	import xxx from 'XXX' // 报错
}

总结

Es Module也是解决了变量污染问题，依赖顺序问题，Es Module语法也是更加灵活，导出值也都是导出的引用，导出变量是可读状态，这加强了代码可读性。

CommonJs和Es Module的区别

CommonJs

• CommonJs可以动态加载语句，代码发生在运行时
• CommonJs混合导出，还是一种语法，只不过不用声明前面对象而已，当我导出引用对象时之前的导出就被覆盖了
• CommonJs导出值是拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染

Es Module

• Es Module是静态的，不可以动态加载语句，只能声明在该文件的最顶部，代码发生在编译时

• Es Module混合导出，单个导出，默认导出，完全互不影响

• Es Module导出是引用值之前都存在映射关系，并且值都是可读的，不能修改

感谢

谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，如有问题欢迎各位大佬指正。

我是蛙人，如果觉得写得可以的话，请点个赞吧。

原文地址：https://juejin.cn/post/6938581764432461854

作者：蛙人

更多编程相关知识，请访问：编程视频！！

以上がCommonJs と Es モジュールについて簡単に説明します。違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。