Vue2升级Vue3处理原 UMD/CommonJS 打包文件，不是标准 ESM

原创已于 2026-07-22 15:45:09 修改 · 175 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

于 2026-07-22 15:44:32 首次发布

如图这是CommonJS打包文件，如何改成vite可识别的标准ESM包装需要增加js文件过渡

import "./vue-qrcode-reader.min.js";

const VueQrcodeReader = globalThis.VueQrcodeReader || {};

export const QrcodeStream = VueQrcodeReader.QrcodeStream;
export default VueQrcodeReader;

然后Vue文件再正常引用使用

标签

#前端 #javascript #vue.js #Vue3

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

路光.

关注关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

带你全面理解JS模块的标准（AMD、CMD、COMMON.JS 、 UMD、ESM）

freddy的博客

04-15

3141

在前端的世界演变里，有着几种JS的模块规范，从出现的序言来说就是： ①amd ②cmd ③common.js ④ umd ⑤ esm 现在Vue框架里面都是遵守esm规范，不得不说esm是目前最好最流行的一种js规范了 amd - 浏览器中的js模块化解决方案 AMD 全称是 Async Module Definition -中文：异步模块化定义 require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加

参与评论您还未登录，请先登录后发表或查看评论

前端模块化CommonJs、ESM、AMD总结

m0_74823490的博客

12-25

1039

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。通过对 CommonJs、CMD、AMD 进一步处理，它没有自己专有的规范，是集结了 CommonJs、CMD、AMD 的规范于一身。语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

web前端面试-- 模块化的几种规范CMD、COMMONJS、AMD、ESM以及UMD模块化解决方案，export *的写法

Penk的博客

12-13

1833

JavaScript 目前有四种模块规范：CMD、COMMONJS、AMD 和 ESM。CMD 是 JavaScript 最早的模块规范，它使用 require 函数来导入模块。CMD 模块是 JavaScript 最早的模块规范，但它存在一些缺陷，比如模块的导入顺序不受控制，模块的依赖关系无法被管理，等等。COMMONJS 是 JavaScript 模块的另一种，它使用 require 函数来导入模块。COMMONJS 模块在解决CMD。

全面理解JS模块的标准（AMD、CMD、COMMON.JS 、 UMD、ESM）

qq_30436011的博客

09-23

4828

require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加载});control.js/*** 登录状态检测*/};/*** 模块调用及配置*/{// 登录页});};// 注册页});};};{// 详情页});};};};});sea.js是CMD模块规范的一个具体实现在定义模块方面, CMD和AMD一样通过define函数来定义模块;

前端打包产物 cjs /es/umd 区别详解

jacky choise

07-04

392

前端打包产物的三种格式区别： CJS（CommonJS）：Node原生模块规范，使用require/module.exports，动态加载，不支持Tree-Shaking，适合Node环境或老旧打包工具。 ESM（ES Module）：ES6官方模块，静态解析，支持Tree-Shaking，现代项目首选，通过import/export语法实现按需加载，体积更小。 UMD：通用模块定义，兼容浏览器全局变量、Node和AMD，代码冗余但适应性广，适合CDN引入或无打包工具的场景。配置建议：库开发者应同时输出三

梳理一下前端模块化规范：CommonJS ESM AMD CMD UMD

tzy233的专栏

05-07

486

前端模块化规范在发展过程中出现过多种规范，包括但不限于CommonJS ESM AMD CMD UMD。大多开发者都对这些名词有个印象，但问起来又有些模糊。本文的目的是做一个梳理，帮助记忆。

Vue开发者必知：vue-sfc-rollup从安装到发布的完整流程

gitblog_00651的博客

07-29

313

vue-sfc-rollup是一个CLI模板工具，能够快速搭建Vue单文件组件（SFC）的编译环境，帮助开发者将组件或组件库打包成可发布到npm的格式。本文将详细介绍vue-sfc-rollup从安装到发布的完整流程，让你轻松上手组件开发与分享。 ## 🌟 快速安装vue-sfc-rollup 要开始使用vue-sfc-rollup，首先需要通过npm进行安装。推荐全局安装，以便在任何项目中

一文吃透 JavaScript 模块化：从 IIFE 到 ESM 的演进与实战

一位搞嵌入式和前端的genius的博客

02-03

1007

摘要：本文系统梳理了JavaScript模块化的演进历程，从无模块时代的全局污染问题，到IIFE闭包隔离方案，再到CommonJS、AMD、CMD等规范，最终到现代ESM标准。详细解析了各方案的实现原理、语法特点及适用场景，重点对比了CommonJS与ESM在加载机制、导出方式等方面的核心差异。文章指出模块化的本质是解决作用域隔离和依赖管理问题，建议现代项目优先采用ESM标准，配合构建工具实现Tree-Shaking优化。最后总结了模块化的发展脉络，强调理解模块化对掌握前端框架底层设计的重要性。

npm库的打包原理与实践详解 (上)

每天都要努力学习哦~~

02-09

773

所谓打包就是将开发阶段的代码处理成生产环境可以供给其他用户使用的产物的过程。一般我们开发的 web 应用，最终会在浏览器上给用户使用，而现代前端的开发环境一般是 Node.js，而 Node.js 环境的重要部分就是 CommonJS 规范，因为 Node.js 的模块系统，就是参照 CommonJS 规范实现的，遵循 CommonJS 规范的代码是不能直接在浏览器中使用的，所以我们需要通过打包工具把遵循 CommonJS 规范的代码转换成浏览器可以识别的代码。

VUEJS文件扩展名esm.js和common.js是什么意思

热门推荐

蓝叶菱的专栏

12-14

2万+

转载：https://segmentfault.com/q/1010000011452736 vue.js ： vue.js则是直接用在<script>标签中的，完整版本，直接就可以通过script引用。 vue.common.js :预编译调试时，CommonJS规范的格式，可以使用require("")引用的NODEJS格式。vue.esm.js：预编译调试时， EcmaScr...

Javascript模块化 - CommonJS - AMD - CMD - UMD 模块化方式详解

qq_37779333的博客

11-16

1107

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起；块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；通过两者的比较，可以得出AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。CommonJS规范主要用于服务端编程，加载模块是同步的，这并不适合在浏览器环境，因为同步意味着阻塞加载，浏览器资源是异步加载的，因此有了AMD CMD解决方案；

imaskjs 构建与打包指南：Rollup、TypeScript、ESM模块系统终极教程

gitblog_01148的博客

12-15

315

imaskjs 是一个功能强大的纯 JavaScript 输入掩码库，它通过灵活的构建系统支持多种输出格式。本文将深入解析 imaskjs 的完整构建流程，从 TypeScript 编译到多格式打包，帮助你全面掌握这个优秀的开源项目的构建体系。🚀 ## 项目架构概述 imaskjs 采用 monorepo 架构，使用 Lerna 管理多个子包。核心包位于 [packages/imask/](

Vite打包中的CommonJS与ES Module之争：从报错看前端模块化的演进

weixin_28829325的博客

02-01

320

本文深入探讨Vite打包中CommonJS与ES Module的兼容性问题，解析`default`导出报错的技术原理，并提供使用`@rollup/plugin-commonjs`等解决方案。通过对比模块规范差异和实战配置，帮助开发者高效处理前端模块化演进中的构建问题，优化项目性能。

端人别再被模块系统搞晕了：UMD让你一套代码通吃Node和浏览器

master_chenchen的博客

02-01

640

它不够潮，没有ESM的静态分析能力，没有Tree Shaking的优雅，甚至看起来有点笨重——if-else套娃，全局变量污染风险，调试还麻烦。当然，如果你确定你的用户都是现代浏览器，都是ESM环境，那确实没必要硬上UMD。现代构建工具都喜欢Tree Shaking（摇树优化，把没用的代码摇掉），但UMD是运行时判断环境，工具静态分析不出来你导出了啥，导致没法摇树。写到这儿，我突然想起我师傅说过的一句话：“在前端这个天天喊重构、周周换新框架的圈子里，能稳定跑十年的代码，比那些花里胡哨的新技术值钱多了。

Vue-clipboard2 源码深度剖析：理解 Vue 插件开发原理

gitblog_00834的博客

05-20

706

Vue-clipboard2 是一个简单的 Vue2 绑定 clipboard.js 的插件，它为 Vue 应用提供了便捷的剪贴板功能集成方案。通过深入分析其源码结构和实现机制，我们可以掌握 Vue 插件开发的核心原理与最佳实践，轻松构建属于自己的 Vue 插件。 ## 插件的基本结构与安装机制 Vue-clipboard2 的核心实现位于 [vue-clipboard.js](https:/

这才是现代 JavaScript 库打包指南

油墨香^-^的博客

02-03

398

本文摘要：文章详细介绍了JavaScript库开发中的模块格式策略（ESM、CJS、UMD）及构建优化方法，包括多文件输出、代码压缩和Sourcemap生成。同时涵盖了TypeScript支持、依赖外部化、浏览器兼容性处理等关键点。在发布配置方面，重点说明了package.json的核心字段设置（exports、sideEffects等）、版本管理和许可证选择。文章为开发者提供了从代码编写到发布的完整指南，强调模块化、兼容性和优化的重要性，帮助构建高质量的JavaScript库。

js模块标准

qq_33404590的博客

09-13

244

前端发展中，总结的几种JS的模块规范。

vue dist中问什么有那么多版本？runtime是什么？

webjhh的博客

01-29

1275

ollama v0.32.14正式发布：WebP 自动转码、Qwen 系统消息兼容升级与 llama.cpp、MLX 更新全解析