JS中ESModule和commonjs介绍及使用区别

JS中ESModule和CommonJS均为JS的模块化规范。ESModule是ECMAScript 6标准中新增的模块化规范，而CommonJS则是Node.js使用的模块化规范。

ESModule和CommonJS的使用区别主要体现在以下几个方面：

定义方式

ESModule使用export关键字来导出模块中的变量、函数或类，使用import关键字来导入其他模块中的变量、函数或类。

// person.js
export const name = '张三';
export function sayHello() {
  console.log('你好，我是' + name);
}

// index.js
import { name, sayHello } from './person.js';
console.log(name);
sayHello();

CommonJS则使用module.exports或exports来导出模块中的变量、函数或类，使用require来导入其他模块中的变量、函数或类。

// person.js
exports.name = '张三';
exports.sayHello = function() {
  console.log('你好，我是' + exports.name);
}

// index.js
const person = require('./person.js');
console.log(person.name);
person.sayHello();

加载方式

ESModule在代码解析时会进行静态分析，即先处理import语句，然后再执行模块中的代码。同时，ESModule支持在浏览器端动态加载模块。例如：

import('./module.js').then(module => {
  // 模块加载成功
}).catch(error => {
  // 模块加载失败
});

CommonJS则是在运行时同步加载模块。

变量绑定方式

ESModule导入的变量是只读的，在导入模块中对变量进行修改是无效的。如下示例中，对变量name重新赋值不会改变原始模块中导出的值。

// person.js
export const name = '张三';

// index.js
import { name } from './person.js';
name = '李四'; // 无效
console.log(name); // 输出: 张三

而CommonJS导入的变量是可以修改的，如下示例中，对变量name进行重新赋值会改变原始模块中导出的值。

// person.js
exports.name = '张三';

// index.js
const person = require('./person.js');
person.name = '李四'; // 有效
console.log(person.name); // 输出: 李四

综上所述，ESModule和CommonJS的使用方式和区别如下表：

	ESModule	CommonJS
定义方式	export、import	module.exports、exports、require
加载方式	静态分析、动态加载	同步加载
变量绑定方式	只读	可修改

示例1：ESModule和CommonJS的混用

// utils.js
export function add(a, b) {
  return a + b;
}

// index.js
const utils = require('./utils.js'); // 使用CommonJS加载ESModule
console.log(utils.add(1, 2));

import { add } from './utils.js'; // 使用ESModule加载ESModule
console.log(add(1, 2));

示例2：在Vue项目中使用ESModule

// App.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
import { computed } from 'vue';

export default {
  setup() {
    const message = computed(() => 'Hello, Vue!');

    return {
      message
    }
  }
}
</script>

在Vue 3.x版本的项目中，可以直接使用ESModule加载Vue.js和其它依赖库，并使用setup函数构建逻辑。