不用npm怎么手动下载并引入JavaScript函数库

一、寻找与下载函数库文件

在 Node.js 与 npm 体系普及前，以及当下的纯静态原型制作中，直接获取单文件脚本是标准操作。常用的下载途径分为两类：一是基于 npm 生态构建的高可靠公共 CDN 分发服务，二是库自身的 GitHub Releases 页面或官方下载主页。

1. 通过 CDN 镜像站直接另存为

常用的公共 CDN 镜像站均直接映射了 npm registry 的所有公开发布包，无需在本地安装环境，即可在浏览器中定位并下载所需文件：

• cdnjs (cdnjs.com)：提供直观的搜索界面与资源列表，每个版本均明确标注了文件名与格式说明，适合初学者直接点击复制下载链接。
• unpkg (unpkg.com)：格式为 https://unpkg.com/<package-name>@<version>/，在浏览器地址栏末尾加上斜杠即可直接浏览包内的完整目录树，便于精准查找构建产物。
• jsDelivr (cdn.jsdelivr.net)：访问 https://cdn.jsdelivr.net/npm/<package-name>@<version>/ 同样可按需浏览文件，支持一键下载或通过浏览器另存为。

2. 辨别正确的产物格式与版本

现代 JavaScript 库在发布时通常会打包出多种格式，若下载了不兼容浏览器的格式，页面将无法正常执行。在挑选下载文件时，应遵循以下判断标准：

• 优先选用 UMD 或 IIFE 格式：此类格式会在加载后将核心对象挂载到浏览器的全局命名空间（即 window 对象）上。例如 Lodash 的 lodash.min.js 会挂载 window._，Day.js 的 dayjs.min.js 会挂载 window.dayjs。
• 区分 ESM（ES 模块）格式：文件名带有 esm 或 module（如 dayjs.esm.js）的文件是专供现代浏览器原生 import 语法的，必须搭配 <script type="module"> 使用，不能直接用传统无 module 的 script 标签执行。
• 严禁下载 CommonJS 专有包：若源码中包含 require('...') 或 module.exports = ... 且未经过打包，浏览器直接解析会抛出 ReferenceError: require is not defined。
• 选择压缩版（.min.js）还是未压缩版（.js）：正式开发或部署选用体积更小的 .min.js；需要阅读源码排查问题时可选择未压缩的 .js。

二、组织本地项目目录结构

下载得到库文件后，不可随意散乱存放在工程根目录中。合理的目录层级有助于隔离业务脚本与第三方依赖，避免路径混乱与文件误删。

推荐的通用标准目录结构如下：

my-project/
├── index.html              # 入口 HTML 文件
├── css/
│   └── style.css           # 页面样式文件
└── js/
    ├── libs/               # 专门存放第三方独立库（或命名为 vendor/）
    │   ├── dayjs.min.js     # 手动下载的日期处理库
    │   └── lodash.min.js    # 手动下载的工具函数库
    └── main.js             # 自身业务逻辑脚本

将第三方文件集中放入 js/libs/ 或 vendor/ 有两个主要收益：

1. 版本隔离与维护清晰：一眼就能分辨哪些是团队自己编写的代码，哪些是外部引入的固定第三方资产。在不需要构建打包时，切勿手动修改第三方库内部的代码，以便未来直接替换同名文件进行升级。
2. 相对路径一致性：在 HTML 中编写引用路径时，所有依赖项均具备统一的前缀结构（如 js/libs/xxx.js），易于检查与书写。

三、在 HTML 中正确引入与加载顺序控制

在没有构建工具协助打包依赖图（Dependency Graph）时，浏览器解析脚本标签的顺序完全决定了全局变量的可用状态。

1. 全局脚本的顺序执行机制

传统的 <script src="..."></script> 标签是同步阻塞加载的。浏览器在 HTML 文档流中自上而下解析遇到 script 标签时，会立即暂停 HTML 解析，发起网络或本地磁盘读取请求，下载完成后立即执行代码，随后才继续向下解析。

这就决定了依赖项必须书写在业务代码的前面。如果业务代码 main.js 中调用了 dayjs()，那么声明 dayjs.min.js 的标签必须排在 main.js 之前。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>手动引入函数库示例</title>
</head>
<body>
  <h1>测试手动引入</h1>

  <!-- 1. 基础依赖库必须排在首位 -->
  <script src="js/libs/dayjs.min.js"></script>

  <!-- 2. 如果存在基于该基础库的插件，排在基础库之后 -->
  <!-- 例如 dayjs 的 customParseFormat 插件 -->
  <!-- <script src="js/libs/plugin/customParseFormat.js"></script> -->

  <!-- 3. 最后引入消费这些库的业务脚本 -->
  <script src="js/main.js"></script>
</body>
</html>

四、验证加载结果与编写示例代码

完成文件摆放与标签书写后，通过双击在浏览器打开或通过本地简易 HTTP 服务（如 VSCode Live Server 或 Python 简单服务器）运行页面，按照以下步骤进行结果验证：

1. 开发者工具控制台验证

按下键盘 F12 打开浏览器开发者工具（DevTools），切换至 Console（控制台） 选项卡：

• 输入目标库的全局变量名并按回车。例如输入 dayjs 或 _。
• 若正确加载，控制台将输出其对应的函数定义或包含众多工具方法的对象结构。
• 如果输出 Uncaught ReferenceError: xxx is not defined，说明标签未正确执行或路径错误。

2. 编写主业务脚本 main.js 进行实测

在 js/main.js 中直接调用该函数库提供的方法：

// js/main.js
// 验证 Day.js 是否就绪
if (typeof dayjs !== 'undefined') {
  const currentFormattedTime = dayjs().format('YYYY年MM月DD日 HH:mm:ss');
  console.log('Day.js 加载成功，当前时间为：', currentFormattedTime);

  // 渲染至页面元素
  const timeDisplayElem = document.getElementById('time-display');
  if (timeDisplayElem) {
    timeDisplayElem.textContent = '当前本地时间：' + currentFormattedTime;
  }
} else {
  console.error('Day.js 尚未加载，请检查 script 标签引入路径！');
}

// 验证 Lodash 是否就绪
if (typeof _ !== 'undefined') {
  const sampleArray = [1, 2, [3, [4]], 5];
  const flattened = _.flattenDeep(sampleArray);
  console.log('Lodash 扁平化数组结果：', flattened);
}

五、补充方案：现代浏览器原生 ES 模块引入

如果不想把所有函数库都挂载到 window 全局对象上污染命名空间，现代浏览器原生支持 ES 模块（ES Modules）。

使用此方案时，在 CDN 下载时必须挑选 ESM 版本（例如 dayjs.esm.js），随后在 HTML 中声明 <script type="module">，并通过相对路径直接导入：

<!-- 现代浏览器原生模块导入方式 -->
<script type="module">
  // 直接以相对路径导入手动下载的 ESM 脚本文件
  import dayjs from './js/libs/dayjs.esm.js';

  console.log('ESM 模块导入执行：', dayjs().format('YYYY-MM-DD'));
</script>

六、常见报错原因与排查矩阵

手动管理依赖时没有构建工具给出详细编译诊断，以下为实际中最容易遇到的问题及对应解决途径：

七、总结

不用 npm 手动下载并引入 JavaScript 函数库是一项基础且实用的前端开发技能。只要在下载时选准适合浏览器环境的 UMD/IIFE 格式产物，合理划分静态文件存放路径，并在 HTML 中按依赖先后顺序放置 script 标签，就能在脱离复杂构建打包工具的情况下，快速、稳健地完成各类前端功能开发。