UMD模块化代码参考模板,写js开源库示例Demo

我们编写js库的时候，我希望自己写的是模块化的代码，可以在结合webpack/vite使用，但我还希望在浏览器script src直接加载使用。如果我只写 export default 这种 ES6 语法的模块，那么老浏览器无法直接使用。

但是如果我直接写全局变量、全局函数，又不符合js现代化要求，就没有做模块化。

以上我的需求，CMD/AMD模块化都不能很好的解决我的问题。

于是，UMD模块化出来了，彻底解决：AMD、CMD模块化各种问题，还能兼容浏览器直接加载js使用。

UMD (Universal Module Definition), 目标：提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式)。

如何写一个 UMD js模块呢，下面我们一起看看。

UMD 模块化参考代码 示例 Demo

参考以下代码，修改全局变量的名称，就能很方便的写出自己的 UMD js 库了。

有了这这个代码，每次写js开源库、公司基础库、公共库，就非常方便了。

1、兼容浏览器 CDN js 使用，script标签 src加载js，访问全局变量就行了

2、兼容 nodejs 使用

3、兼容 webpack 、vite 等模块化打包工具

这种方式，也可以作为 js sdk 开发的模板代码，对于写一些简单的 js sdk 这种方式就够用了。

有了这种 umd 模块，在浏览器直接加载使用，他会创建全局变量使用；在webpack打包的时候，又不会创建全局变量（不会污染全局）。两全其美。

对于写 js 公共库，还有注意的是：尽量写 es5 代码，不要写 ES6， ES6 导致一些：钉钉webview 老的chrome 内核报错，安卓老手机也可能报错，sdk无法正常运行。

对于简单的js sdk，直接手写 es5 就行了，无需搭建复杂的开发环境，不要安装几千个 node_modules 依赖包。
复杂的 js sdk，还是使用 webpack 这些构建工具再转换一下 ES5 吧。

手写的 js，检测有没有 ES6+ 新语法，可以使用 ES6+语法在线检测 ，检测通过，也就能放心交付到用户手里了，不用担心老浏览器遇到js语法报错的问题。

UMD参考代码 示例 example

写js库，脚手架模板，兼容各种模块化方案，UMD模块化代码模板

UMD js 模块化的模板代码

有没有兼容AMD 、 CMD 各种方式的模块化方案

兼容浏览器环境，同时兼容 nodejs 环境的js模块化技术方案

我想让自己写的js，可以浏览器直接加载js使用，又能放在webpack、vite打包使用，还能兼容nodejs，参考这个方法就行了。

写js开源库的基础脚手架代码 umd 方案