ES6 模块化与 CommonJS 模块化区别
在最近的项目中关于 ES6 的 import、export 和 CommonJS 中的 module.exports、require 的使用傻傻搞不清楚，今天下定决心总结一下，有什么不对的地方，还请诸位多多指教。
ES6 模块化
import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口。
一、 import 与 export
// 导出 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'二、 import 与 export defalut
export 可以有多个，export default 仅有一个
// 导出 a.js
let obj = {
name: 'hello',
getName: function (){
return this.name
}
export default obj
// 引入 b.js
import obj from './a.js'CommonJS 模块化
一、 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')总结
即使我们使用了 ES6 的模块系统，如果借助 Babel 的转换，ES6 的模块系统最终还是会转换成 CommonJS 的规范。
Babel5 中使用 require 时，引入值是 module.export 返回的值或者是 export default 返回的值。
Babel6中，使用 import 引入时，可以直接获取到 export default 的值 ； 但是如果是 require 导入的组件， 无论导出是 module.export 、export 、 export default可以直接获取到 export default 的值都必须要加上一个 default。
参考文献 ：https://www.jianshu.com/p/27ee06296bcdhttps://juejin.im/post/5a2e5f0851882575d42f5609
推荐教程：《JS教程》
以上就是详解ES6模块化和CommonJS模块化的区别的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
568
收藏
