html本身不能直接使用npm包，因npm是node.js包管理器，浏览器不识别require()、裸模块import，也不加载node_modules；必须通过browserify、vite或webpack等构建工具打包成浏览器可执行文件。
HTML 文件本身不能直接使用 npm 包——npm 是 Node.js 的包管理器，运行在构建环境或服务端；浏览器不识别 require()、不解析裸模块名（如 import _ from 'lodash'）、也不加载 node_modules 目录。想让 HTML 用上 npm 包，必须经过「构建」这一步，把模块转成浏览器能执行的代码。
为什么 <script src="node_modules/xxx/index.js"></script> 会报错
常见错误现象包括：Uncaught ReferenceError: require is not defined、xxx is not defined、或依赖内部调用了 fs/path 等 Node 内置模块而崩溃。
根本原因在于：npm 包默认按 CommonJS（CJS）或 ESM 编写，面向 Node.js 运行时；浏览器原生只支持全局变量、UMD 构建版，或路径为相对/绝对 URL 的现代 ESM（不能是包名）。你看到的 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> 能用，是因为 CDN 提供的是已打包好的 UMD 版本，不是原始 npm 源码。
- 不要手动复制
node_modules下的源文件进<script></script>标签 - 不要指望浏览器能“自动解析”
import中的包名 - 若某包内部用了
require('fs')，哪怕你强行引入其入口文件，也会在浏览器中报错
初始化项目并生成 package.json
这是所有操作的前提：没有 package.json，npm install 就不知道该装什么、装到哪、怎么分类依赖。
- 在项目根目录执行
npm init -y，快速生成默认package.json - 确认
name和version字段合理（避免空值或非法字符） - 检查是否已有
package-lock.json：若有，后续npm install会严格按它还原版本，而非仅看package.json
安装依赖时区分 dependencies 和 devDependencies
装错位置会导致体积膨胀、部署失败或运行时报错 Cannot find module。
-
dependencies：最终要进浏览器执行的库，比如react、chart.js、lodash—— 用npm install lodash --save（或简写npm install lodash，npm 5+ 默认行为） -
devDependencies：只在开发/构建阶段用的工具，比如vite、webpack-cli、eslint—— 必须加-D或--save-dev，否则会被打包进生产代码 - 全局安装（
npm install -g）对前端项目无意义：浏览器不会读取全局node_modules
用构建工具把 npm 包打包进 HTML 可用的 JS
不打包 = 白装。推荐两个轻量路径：
Browserify（适合小项目、快速验证）：
- 全局安装：
npm install -g browserify - 写
src/main.js：例如var _ = require('lodash'); console.log(_.now()); - 确保已
npm install lodash --save - 执行：
browserify src/main.js -o dist/bundle.js - HTML 中引入：
<script src="dist/bundle.js"></script> - 注意：
browserify不模拟 Node 内置模块；若包用了fs，需加--ignore fs或换包
Vite（推荐新项目）：
- 初始化：
npm create vite@latest my-project -- --template vanilla cd my-project && npm install- 在
main.js中写import _ from 'lodash'，Vite 会自动解析并打包 -
npm run build输出到dist/，所有资源路径自动重写，HTML 可直接引用
Webpack 配置更重，但如果你已有成熟配置，确保 HtmlWebpackPlugin 正确注入 script 标签，且 output.publicPath 与实际部署路径一致，否则生成的 HTML 里 JS 路径 404。
真正容易被忽略的是：构建产物是否真的把依赖“打平”了？有没有漏掉 peer dependency？有没有因 process.env.NODE_ENV 未定义导致压缩后逻辑异常？这些往往要靠打开 dist/bundle.js 搜索关键函数名或变量名来验证，而不是只看控制台没报错就以为成功了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
