引入不同模块化规范的外部组件包时报错

最新推荐文章于 2022-09-22 13:32:25 发布

原创

最新推荐文章于 2022-09-22 13:32:25 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#AMD #CMD #CommonJS #ES6 #AMD、CMD、CommonJs、ES6的对比

在项目开发中，引入遵循不同模块规范的组件库时可能出现报错。本文分析了问题原因，指出错误源于模块解析模式不匹配。解决方法是通过配置工具将所有代码转换为同一规范，例如设置`module.exports`。同时，文章深入探讨了AMD、CMD、CommonJS和ES6模块的区别，以及ES6模块为何能替代前三种规范，强调了ES6模块的静态解析和避免循环加载的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象说明

在日常开发中，我们会经常遇到引用其他现有的组件库的情况，以现有项目为例，我们会常常引入hui-pro，hui-pro组件库是不同的人编写，会有不同打包输出方式，有些包是遵循commonjs规范，有些包是遵循es6规范，在海豚脚手架升级之前，引入不同规范的组件包，项目就会出现报错。本文将提供解决方式，并重点解析其原因
例：老的海豚脚手架在引入hui-pro empty组件时，报错如下：
在这里插入图片描述

问题解析

从浏览器console面板里面的报错信息（见图）来看，提示‘exports of Object’无法识别，引发三个黑人问号：哪里来的exports？为啥不是export? 本项目支持的模块导出是什么？
下面一一解答这些困惑。
commonJs规范模块导出用的是exports,首先前端代码里现在都是用es6,只会是export不会出现exports,node里面用的是commonjs规范，那么也就只能是打包的配置出现问题。由此怀疑empty这个组件是采用commonJS的方式打包输出的，高明君（empty组件开发者）也是这么说的，用的是lib方式打包，输出的是