如何通过npm在HTML项目中高效管理前端依赖包？

本文共计1088个文字，预计阅读时间需要5分钟。

HTML 本身不能直接使用，需要通过以下方式实现：

为什么直接 <script src="node_modules/xxx/index.js"></script> 会失败

常见错误现象：

• 控制台报错 Uncaught ReferenceError: require is not defined
• 引入后变量未挂载到 window，调用时 xxx is not defined
• 依赖嵌套报错，比如某包内部又 require('fs') 或 require('path')，这些 Node 内置模块在浏览器里根本不存在

根本原因：npm 包默认按 CommonJS（CJS）或 ESM 编写，面向 Node.js 运行时；浏览器原生只支持全局变量、UMD 构建版或现代 ESM（且路径必须是相对/绝对 URL，不能是包名）。

所以你看到的 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> 能用，是因为 CDN 提供的是已打包好的 UMD 版本，不是原始 npm 包文件。

立即学习“前端免费学习笔记（深入）”；

browserify 是最轻量的“npm → 浏览器”桥梁

适合小项目、快速验证、不想配 webpack 的场景。