ES6 中 exports 和 modules.exports 的使用及差别？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，模块化是一种常用的编程方法。ES6 中引入了新的模块化标准，使得前端开发者更加便利地定义和使用模块。在 ES6 中，有两种常见的导出模块的方式：exports 和 modules.exports。本文将会详细介绍这两种导出模块的使用和差别，帮助读者更加深入地了解 ES6 中的模块化编程。

模块导出

在 ES6 中，可以通过 export 和 export default 语句将变量、函数、类等导出到模块外。例如：

// www.javascriptcn.com code example
// export 导出
export const name = 'Tom';
export function sayHello() {
  console.log('Hello!');
}

// export default 导出
export default class Person {
  constructor(name) {
    this.name = name;
  }
}

这样，就可以在其他文件中导入这些模块，以方便地使用其中定义的变量、函数、类等：

// 导入 name 和 sayHello
import { name, sayHello } from './example.js';

// 导入 Person
import Person from './example.js';

exports 和 modules.exports 的使用

除了使用 export 和 export default 导出模块外，ES6 还支持使用 exports 和 modules.exports 导出模块。它们的主要区别在于：

modules.exports 是 Node.js 中用于导出模块的方式，而 exports 是 Node.js 中 modules.exports 的一个别名；
modules.exports 可以通过赋值一个新对象或直接赋值来导出模块，而 exports 只能通过直接赋值来导出模块；
在一个模块中，若同时使用 exports 和 modules.exports 导出，则以最后一次赋值为准。

通过赋值一个新对象来导出模块

使用 modules.exports 可以通过赋值一个新对象来导出模块，如下所示：

// www.javascriptcn.com code example
// module.js
const module = {};
module.exports = {
  name: 'Tom',
  age: 18,
  sayHello() {
    console.log('Hello!');
  }
};

在另一个文件中，可以通过 require 语句导入该模块：

// main.js
const module = require('./module');
console.log(module.name);  // 'Tom'
console.log(module.age);   // 18
module.sayHello();         // 'Hello!'

使用 exports 也可以导出模块，只需将需要导出的属性挂载到 exports 对象上即可：

// module.js
exports.name = 'Tom';
exports.age = 18;
exports.sayHello = function() {
  console.log('Hello!');
};

在另一个文件中，可以通过 require 语句导入该模块：

// main.js
const module = require('./module');
console.log(module.name);  // 'Tom'
console.log(module.age);   // 18
module.sayHello();         // 'Hello!'

直接赋值导出模块

使用 modules.exports 也可以直接赋值来导出模块，如下所示：

// module.js
modules.exports = 'Hello from module!';

需要注意的是，使用直接赋值导出模块时，不能同时使用 exports 导出模块，否则 exports 对象会覆盖掉 modules.exports 对象。

如何选择使用 exports 或 modules.exports？

要选择使用 exports 还是 modules.exports，需要根据实际情况和项目需要来决定。一般来说，如果一个文件导出的对象比较多，使用 modules.exports 可以更好地组织代码，避免代码的冗余和混乱；如果一个文件只需要导出一个对象或导出对象数量比较少，使用 exports 更加方便。

无论使用哪种方式导出模块，都需要在另一个文件中使用 require 语句来导入该模块。

示例代码

下面是使用 exports 和 modules.exports 导出模块的示例代码。

使用 modules.exports 导出模块：

// www.javascriptcn.com code example
// module.js
const module = {};
module.exports = {
  name: 'Tom',
  age: 18,
  sayHello() {
    console.log('Hello!');
  }
};

// main.js
const module = require('./module');
console.log(module.name);  // 'Tom'
console.log(module.age);   // 18
module.sayHello();         // 'Hello!'

使用 exports 导出模块：

// www.javascriptcn.com code example
// module.js
exports.name = 'Tom';
exports.age = 18;
exports.sayHello = function() {
  console.log('Hello!');
};

// main.js
const module = require('./module');
console.log(module.name);  // 'Tom'
console.log(module.age);   // 18
module.sayHello();         // 'Hello!'

直接赋值导出模块：

// module.js
modules.exports = 'Hello from module!';

// main.js
const module = require('./module');
console.log(module);  // 'Hello from module!'

希望这篇文章对大家理解 ES6 中 exports 和 modules.exports 的使用及差别有所帮助，并在实际开发中进行正确使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bd1fb0a231b2b7edf2e092

ES6 中 exports 和 modules.exports 的使用及差别？