前言
在前端开发过程中，我们经常会用到各种第三方库和框架以提高开发效率和降低开发难度。而这些库和框架通常是通过 npm 包的方式来安装和使用的。但是，如果想要在浏览器端直接使用这些库和框架，就需要使用到 umd 规范。本文将详细介绍 npm 包 umd 的使用方法。
umd 是什么
UMD 即 Universal Module Definition，它是一种既能够在浏览器端运行，又能够在 Node.js 等 CommonJS 模块载入器中使用的 JavaScript 模块规范。UMD 它支持以下三种形式：
- AMD
- CommonJS
- 全局变量
UMD 可以用来解决浏览器端和 Node.js 端的模块化问题。
umd 的作用
在使用第三方库和框架时，我们通常是通过 import 或 require 方法来引入其提供的方法和属性。但是，如果我们需要在浏览器端使用这些库和框架，就需要在 HTML 中使用 script 标签来引入并且在全局作用域下才能使用。而这样做会造成全局变量污染的问题。UMD 解决了以上的问题，既能够在浏览器端直接使用，也能够在模块化的环境中使用。
umd 的使用方法
npm 包 umd 的使用方法分为两个步骤：
1. 安装 npm 包
打开终端，进入项目目录，输入以下命令安装 npm 包：
npm install 包名
2. 使用 npm 包
以常用的 jQuery 库为例，演示 npm 包 umd 的使用方法。
2.1 引用 npm 包
引入 jQuery，有两种方式：
2.1.1 使用模块化引入方式
通过 import 或 require 方法，按照模块化的引入方式引入 jQuery。
import $ from 'jquery';
或
const $ = require('jquery');2.1.2 使用全局变量
通过 <script> 标签引入 jQuery 的源文件，此时 jQuery 被挂载在全局作用域上。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2.2 引用 umd 包
将 jQuery 封装成 umd 包
npm install umd -D
const fs = require('fs');
const umd = require('umd');
const path = require('path');
const jquery = fs.readFileSync(path.resolve(__dirname, './node_modules/jquery/dist/jquery.js'), 'utf-8');
let out = umd('jquery-module', jquery);
fs.writeFileSync(path.resolve(__dirname, './lib/jquery.js'), out);
创建 html 页面，并引入 umd 包即可使用。
-- -------------------- ---- -------
--------- -----
------
------
---------- - --- ------------
-------
------
------- -------------------------------
--------
-- -- ------ ----
-------------------------- -- -
-------------------- -------
---
---------
-------
-------结论
通过以上的方法，我们可以轻松地解决了 npm 包在浏览器端使用的问题，避免全局变量的污染，同时也方便了模块化的开发。使用 umd 规范使得库和框架可以在浏览器端和模块化开发环境中无差别地使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40413