html本身不能直接使用npm包，因浏览器不识别require()、裸模块import，也不加载node_modules；必须通过browserify或webpack等构建工具打包成浏览器可执行文件。
HTML 文件本身不能直接使用 npm 包——没有构建步骤，require() 和裸 import 会立即报错，node_modules 路径在浏览器里根本不存在。
为什么 <script src="node_modules/lodash/index.js"></script> 一定失败
常见错误包括：Uncaught ReferenceError: require is not defined、lodash is not defined，甚至 Cannot find module 'fs'。根本原因不是路径写错，而是 npm 包默认面向 Node.js 运行时：它依赖 require()、process、fs 等浏览器没有的 API，且模块解析规则（如包名导入）浏览器原生不支持。
你能在 HTML 里用 CDN 上的 lodash.min.js，是因为它已是 UMD 格式、全局挂载 _ 的构建产物，不是原始 npm 源码。
- 不要手动复制
node_modules下任意 JS 文件进<script></script>标签 - 不要指望浏览器能解析
import _ from 'lodash'中的'lodash' - 哪怕包内部只调了一次
require('path')，也会在浏览器崩溃
必须走构建：Browserify 最简路径
适合验证逻辑、小工具页、不想配 Webpack 的场景。它把 require() 静态分析并打包成单个浏览器可执行文件。
- 先执行
npm install -g browserify - 项目根目录运行
npm init -y，再npm install lodash --save - 新建
src/main.js，写const _ = require('lodash'); console.log(_.now()); - 执行
browserify src/main.js -o dist/bundle.js - HTML 中用
<script src="dist/bundle.js"></script>
注意：browserify 默认不模拟 Node 内置模块。若包用了 fs 或 path，需加 --ignore fs 参数，或换用提供浏览器版的包。
Webpack：现代项目的事实标准
当你需要处理 CSS、图片、TypeScript，或已有 React/Vue 组件，就必须用 Webpack。它默认支持裸模块名导入，但必须配置入口和插件。
-
entry必须是相对路径（如./src/index.js），不能是包名 - 装
html-webpack-plugin（npm install --save-dev html-webpack-plugin）才能自动生成index.html并注入<script></script> - 若要引入 Bootstrap CSS，得在
src/index.js里写import 'bootstrap/dist/css/bootstrap.min.css';，而非在 HTML 里<link> - 生产模式（
--mode=production）启用 Tree Shaking，但未显式引用的导出会被剔除——别依赖副作用
没配 html-webpack-plugin，打包后就只有 JS 文件，HTML 里还得手动维护 <script></script> 路径，极易出错。
CDN 引入不是“不用 npm”，而是绕过依赖管理
直接写 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> 能跑，但它脱离了 package.json 版本约束，无法做 npm audit 安全检查，也不支持按需加载（如 import { debounce } from 'lodash'）。
真正复杂的地方在于：**你选的构建方式决定了后续所有依赖的写法、加载时机和调试体验**。Browserify 保有 require 习惯，Webpack 支持完整 ESM 语法，而 Vite 在开发时甚至不打包——但它们都绕不开一个前提：HTML 只认静态 URL，不认包名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
