npm install后import不生效的主因是模块解析环境不匹配：浏览器原生ESM不支持包名解析，node.js ESM需.mjs或type:”module”，推荐用vite等构建工具接管；react生态库如antd需注意编译配置、按需导入插件及css显式引入；CDN引入vue须选对版本并显式解构API；webpack的require.context行为特殊且不可跨工具迁移。
npm install 后为什么 import 不生效
常见现象是执行了 npm install lodash，但在 JS 文件里写 import _ from 'lodash' 却报错 Cannot find module 'lodash' 或运行时 _ 为 undefined。根本原因不是安装失败，而是模块解析环境不匹配。
- 浏览器原生 ES 模块（
）默认只支持相对路径或完整 URL，不支持包名解析——import _ from 'lodash'会直接 404 - Node.js 的 ESM 模式虽支持包名，但需确保文件后缀为
.mjs或type: "module"已声明在package.json中 - 最稳妥的起步方式：用构建工具（如 Vite、Webpack）接管模块解析，它们内置了 node_modules 映射规则
Vite 项目中正确引入 React 和 Ant Design
不是所有“第三方库”都能开箱即用。React 生态里，UI 组件库常依赖特定的打包配置和运行时条件。
-
npm install react react-dom antd是必须的，但antd默认导出的是未编译的 ES 源码（含 JSX/TS），Vite 能处理，Create React App 则不行（需额外配 Babel） - 按需导入必须配合插件：Vite 用户装
@ant-design/vite-plugin，并在vite.config.ts中启用；否则全量加载antd会导致包体积暴涨 - CSS 需显式引入：
import 'antd/dist/reset.css'（v5.12+ 推荐）或旧版的antd/dist/antd.css，漏掉这行就只有 JS 逻辑，样式全丢
CDN 引入 Vue 3 但 createApp 报错 undefined
Vue 官方 CDN 提供多个版本，混淆 global、esm-browser、runtime 会导致核心 API 缺失。
- 直接用
才有全局Vue.createApp；若误用vue.esm-browser.js，它只用于原生模块环境，且不会挂载到window - 使用 Composition API 时，
ref、onMounted等函数必须从vue显式解构：const { ref, onMounted } = Vue，不能指望它们自动进入作用域 - CDN 方式无法使用单文件组件（
.vue），template选项只能传字符串，不能写块
require.context 在 Webpack 中动态加载插件目录的坑
这个 Webpack 特有 API 常被用来实现“插件热插拔”，但它的行为和 node.js 的 require 完全不同。
立即学习“Java免费学习笔记（深入）”；
-
require.context('./plugins', false, /.js$/)的第二个参数是includeSubdirs，设为false就不会递归扫描子文件夹，哪怕你写了./plugins/**.js - 返回的 context 函数调用结果是模块导出值，不是模块对象——
context('./a.js')直接返回a.js的export default，没有__esModule标志，可能破坏 Tree Shaking - 该 API 在 Vite、Rollup 中不存在，迁移到新构建工具时必须重写为
import.meta.glob（Vite）或动态import()列表
真正卡住人的往往不是“怎么装”，而是“装完在哪能用、以什么形式用”。不同库对运行时环境、构建阶段、模块格式的隐含要求，比文档里写的更具体。