您的位置 首页 技术

详解ES6模块化和CommonJS模块化的区别

ES6 模块化与 CommonJS 模块化区别 在最近的项目中关于 ES6 的 import、export 和 CommonJS 中的 module.exports、require…

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.jsimport {getSheep} from './a.js'/** 写法二 **/var name = 'sheep'export function getSheep() {    name = 'hourse'}// 引入 b.jsimport {getSheep} from './a.js'

二、 import 与 export defalut

export 可以有多个,export default 仅有一个

// 导出 a.jslet obj = {    name: 'hello',    getName: function (){        return this.name    }export default obj// 引入 b.jsimport obj from './a.js'

CommonJS 模块化

一、 require 与 module.exports

require 在 ES6(bable将import转化为require) 和 CommonJS 中都支持

// 导出 a.jslet obj = {    name: 'hello',    getName: function (){        return this.name    }module.exports = obj// 引入 b.jslet 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/27ee06296bcd

  • https://juejin.im/post/5a2e5f0851882575d42f5609

推荐教程:《JS教程》

以上就是详解ES6模块化和CommonJS模块化的区别的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/86424.html

为您推荐

返回顶部