浪漫网站建设,提高关键词排名的软文案例,中国网站备案查询系统,wap网站cmsCommonJS 和 ESModule 混合开发
接上文#xff0c;仍旧在 abc-cli 项目中参考#xff1a;https://blog.csdn.net/Tyro_java/article/details/136433159现在要在脚手架项目中安装 chalk 依赖#xff0c;因为在 abc-cli 项目几乎都是 CommonJS的实现而 chalk 这个依赖源码是基…CommonJS 和 ESModule 混合开发
接上文仍旧在 abc-cli 项目中参考https://blog.csdn.net/Tyro_java/article/details/136433159现在要在脚手架项目中安装 chalk 依赖因为在 abc-cli 项目几乎都是 CommonJS的实现而 chalk 这个依赖源码是基于 ESModule 的所以现在要解决的是两者的兼容先安装 chalk 到 cli 包中在 abc-cli 目录下$ npm i chalk -w packages/cli但是在使用 chalk 的时候就会报错不能使用 require现在有几种解决方案 第一种降级 chalk 到低版本, 大概在4.0左右但是这就无法使用 chalk 的新特性了第二种修改自己的代码将之前的 require 全部修改成 import, 并且package.json中添加 type:module 这种会造成更大的问题一是之前的语法全部要修改包括 module.exports二是如果要使用一些只有 CommonJS 的依赖就会有问题 第三种在CommonJS中允许使用 import 来加载依赖但是 import 返回了一个 Promise 这种只能异步拿到真实的依赖就不好处理了 现在遇到了一个问题就是如何兼容 CommonJS 和 ESModule, 怎样才能最佳实践npm 模块有的使用CommonJS, 有的使用 ESM, 两者混合开发成为 Nodejs 项目必须考虑的问题
1 CommonJS
CommonJS 单独使用有两种方式 1 在 package.json 中指定 type: common 这个不指定也是默认的所有js文件的的导入都用 require 语法来引用模块所有js文件的导出都用 module.exports 语法来导出2 不管 package.json 中指定的是 type: common 亦或是 type: module只要js文件的后缀是 .cjs 都可以使用 require 和 module.exports 语法这样默认走的就是 CommonJS 规范 注意module.exports 和 exports.xx 不能混用两者混用后者不生效CommonJS规范默认通过自执行函数实现比如require源码它可以做一些变量注入比如 __dirname, __filename 都是通过注入的方式来显示的可以把它们直接打印出来
2 ESModule
ESModule 也有两种使用方式 1 在package.json中定义 type: module包内所有 .js 文件会被认为是 ESModule2 .mjs 后缀的文件强制被认定为 ESModule 在ESModule中导出 export default {}导入 import在这里__dirname, __filename 这种API统统不支持但是网上也有兼容方案这里先不研究 除了网上的一些解决方案这里暂时提供一个第三方库来解决 dirname-filename-esm
3 CommonJS 和 ESModule 混用
原则上不应该混用一般我们开发包的时候需要指定一种单个模块必须指定CommonJS 或 ESM, 如果混用必须用webpack或babel来解决另外package.json 的 type 可以不写如果写就必须指定一种默认是 commonjs越来越多的模块采用了 ESModule, 也就是指定 type 为 module
3.1 在 CommonJS 中引用 ESM
如果一个模块是ESM, 比如它叫 “esm” 来举例import(esm).then(esm esm.default())这种做法非常别扭CommonJS 本身是一个同步的规范require 它的实现是一个同步加载模块的方案 它在模块外围包一层自执行函数是同步方案实现的参考https://blog.csdn.net/Tyro_java/article/details/53574887 ESM 本身用的是 import 用的是异步方式来加载和CommonJS是完全不同的两种实践方案如果是 在 CommonJS 中引用 ESM那么代码就会非常的奇怪要想实现同步操作就必须加一个自执行函数并将这个函数指定为 async 方式(async function() {const esm await import(esm);esm.default();
})()这样很麻烦也很奇怪但是能解决问题
3.2 在 ESM 中引用 CommonJS
在 ESM 包中不管依赖是 ESM还是CommonJS方案开发的都可以直接 import假设 “cjs” 是一个 CommonJS 模块的方案imort cjs form cjs;所以推荐把源码全部移植到ESM模块中
常见的报错问题和解决 1 未指定 package.json 中的 type, 但是使用了 import 和 export 语法 这是缺失了 package.json 中 type 默认是 commonjs 的知识点造成的 2 require 语法无法加载ESM模块 必须使用 import 来加载ESM模块 3 ESM 去加载其他ESM模块时会有找不到模块的报错 没有构建工具时import的时候需要添加后缀不能省略注意还有导出用 export default 时引入时别忘记了这个 default
