javascript模块化编程之CommonJS与EsModule总结

65 阅读 0 评论 43 点赞

我是靠谱客的博主和谐大山，最近开发中收集的这篇文章主要介绍javascript模块化编程之CommonJS与EsModule总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

区别

环境

两种模式互相加载

同时兼容加载两种格式

总结

模块化以及模块化开发

模块化开发的目的是将程序划分成一个个小的结构，这个结构有属于自己的代码逻辑，有自己的作用域，不会影响到其他的结构，这个结构希望暴露的变量，函数，对象给其他结构使用，也可以通过某种方式导入其他结构的变量，函数，对象。

这种结构叫模块，按照这种结构划分开发的过程，就是模块化开发的过程

区别

语法：

CommonJS模块使用require()引入模块，使用module.exports导出模块
EsModule模块使用import引入模块，使用export导出模块

// CommonJs -------
// 引入模块
var path = require("path")
// 导出模块
const path = ()=>{}
module.exports = path
// EsModule ----------
// 引入模块
import path from "path"
import { doSomeThing } from "path"
// 导出模块
export const doSomeThing = ()=>{}
export default path

用法：

require()同步加载模块，js是单线程，会阻塞加载
import是异步加载模块

node.js使用的是CommonJS模块规范。
浏览器使用的是EsModule模块异步加载，因为如果使用CommonJS同步加载资源时会有卡顿现象

值：

CommonJS是基于值的拷贝
EsModule是基于值的引用

环境

node.js环境中，.js后缀的文件默认使用的是CommonJS模块，如果想要使用ES6模块需要采用.mjs后缀的文件名。
如果想要不修改文件后缀名，但是又使用ES6模块，可以编辑项目的根目录package.json文件

{
"type":"module"
}

修改package.json文件后，.js脚本文件就会使用ES6模块解析
如果修改package.json的同时想要使用CommonJS模块，需要将相应脚本文件后缀改成.cjs

两种模式互相加载

CommonJS模块加载EsModule模块：

直接使用CommonJs的require加载EsModule模块会报错
因为CommonJS是同步加载，可以使用async与await实现同步

// 使用匿名函数闭包
(async()=>{
await import('./test.mjs')
})()

EsModule加载CommonJs模块：

EsModule可以使用import命令加载CommonJS，
但是因为CommonJs导出是使用module.export导出整个模块对象，不能直接输出单一项
如果想要输出单一项，可以使用对象的解构赋值

// test.cjs文件
const method1 = ()=>{}
const method2 = ()=>{}
module.exports = {
method1,
method2
}
import Test from "./test.cjs"
//对象解构赋值
const { method1,method2 } from Test
// 会报错
import { method1,method2 } from './test.cjs'

同时兼容加载两种格式

// 原始模块是CommonJS
// 嵌套一层，包装成esmodule模块
import Test from "./test.cjs"
export const method1 = Test.method1
export const method2 = Test.method2
export default Test
// 原始模块是EsModule
//提供一个统一输出接口export default
// CommonJS使用import()引入