uni-app支持npm但需适配多端:微信小程序需“构建npm”生成miniprogram_npm目录,App/H5与小程序环境差异大,依赖window/document/fetch/crypto等的包(如axios、uuid@9+)不可直接使用,应选纯逻辑库(如dayjs)或替换为uni.request等原生API,并用process.env.UNI_PLATFORM做平台判断。

uni-app 支持 npm,但「支持」不等于「照搬 Web 那套就能跑通」。微信小程序平台没有 window、document、fetch、crypto,App 端运行环境又和 H5 不同——直接 import 一个浏览器库,90% 概率在非 H5 平台报错,比如 Cannot read property 'document' of undefined 或 global is not defined。
npm install 后为什么小程序里 import 报错?
不是没装上,而是微信小程序构建流程多了一步:它不直接读 node_modules,必须显式触发「构建 npm」,生成 miniprogram_npm 目录才能识别。
- 确保项目根目录有
package.json(没有就先npm init -y) - 在微信开发者工具中,点击菜单栏「工具」→「构建 npm」,勾选「使用 npm 模块」
- 构建成功后,检查是否生成了
miniprogram_npm/xxx目录;没生成说明包不兼容小程序(比如用了fs或child_process) - 若用 HBuilderX 运行,需先在微信开发者工具里构建完,再点「运行到小程序模拟器」
哪些 npm 包能直接用,哪些必须换?
关键看它是否依赖 Node.js 全局对象或浏览器专属 API。不是版本新旧问题,是能力有无问题。
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 能用:
js-md5、lodash、dayjs(纯逻辑、无副作用) - 不能直接用:
axios(拦截器在 App 端失效,小程序无XMLHttpRequest)、uuid@9+(依赖crypto.randomUUID)、jsencrypt(依赖Buffer和crypto) - 替代方案:
uni.request替代axios;uuid@8.3.2替代新版;微信原生uni.getSystemInfoSync().SDKVersion >= '2.21.0'才有uni.encrypt支持 AES
require is not defined?别硬写 CommonJS
uni-app 全平台只保证 import 语法可用。require() 是 CommonJS 规范,在小程序和 App 端没有运行时支持,编译期就可能中断。
- 所有模块引入统一用
import xxx from 'xxx',哪怕你装的是 CommonJS 包(现代打包器会自动适配) - 避免
require('./utils/' + name)这类动态路径——构建工具无法静态分析,H5 可能侥幸跑通,小程序必挂 - 本地 JS 文件(非 npm 包)不要放
node_modules下,应放static/或common/,用import绝对路径引入:import utils from '@/common/utils.js'
platform 判断不是可选项,是必填项
很多库在 H5 能跑,是因为它内部写了 if (typeof window !== 'undefined'),但你自己写的业务逻辑不会自动判断平台。不加包裹,小程序里一执行就崩。
- 用
process.env.UNI_PLATFORM === 'h5'做条件分支,而不是typeof window !== 'undefined'(小程序里window是undefined,但process.env是构建时注入的) - DOM 操作类库(如
highlight.js、echarts)必须放在onMounted或onLoad之后初始化,且仅在 H5 执行:if (process.env.UNI_PLATFORM === 'h5') { initEcharts() } - 别把平台判断逻辑塞进
main.js全局挂载——有些包初始化就会访问document,全局加载等于提前引爆
最常被忽略的一点:小程序平台不支持 configureWebpack.externals,所以别指望用 webpack 配置把某个包“拎出去”;也别信网上搜到的“小程序 crypto polyfill”,那玩意儿根本跑不起来——平台能力缺失,不是靠补丁能绕过去的。

















