解惑:微信开发者工具中找不到“使用npm模块”设置项?

网上很多使用微信开发者工具开发小程序项目的教程中,由于小程序项目中会使用到第三方包,所以在安装完第三方包后,还需要进行构建 npm一下,也就是在“ 工具 “ - “构建npm”,之后都会提到需要在“设置”- “项目设置” - “本地设置”中勾选“ 使用npm模块 ”选项。

番外:为什么在小程序中使用npm安装第三方包,需要构建npm才能使用❓
 

默认情况下,在小程序内安装的第三方的包,是安装在node_module目录内的,且安装完包后也是不能马上使用的,因为小程序比较特殊,它是无法直接读取node_module软件包的,那小程序该如何使用安装的包呢?解决办法就是需要通过点击开发者工具菜单栏里的“ 工具 ” - “构建npm的方式,把安装的包迁移到miniprogram_npm目录(构建npm时自动生成该目录)中,然后就可以使用该目录下的第三方包了。需要注意的是:每安装一个新包,就需要重新构建npm一次,且在构建之前,为了防止出现一些不必要的未知错误,可以先把之前安装包后构建生成的miniprogram_npm目录删除,然后再点击构建npm重新生成;如果不删的话,有可能,只是有可能会导致构建失败。

但是很多初识小程序项目以及微信开发者工具的盆友们,下载的微信开发者工具中并没有这一项,也由此产生了一些疑惑,这个配置项跑哪儿去了呢?

这是因为很多盆友使用的是较新或是最新版本的微信开发真工具,而新版本的微信开发者工具已经默认支持npm了,不需要再手动配置修改选项了。现在使用微信开发者工具可以直接通过 npm i 安装模块,然后进行构建npm就可以了了。

小程序官方文档对npm工具的支持亦有说明: 更多详情:npm 支持 | 微信开放文档

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。

### 微信开发者工具使用 npm 的方法及配置教程 #### 一、背景介绍 npm 是 JavaScript 生态中的管理工具,同时也是 Node.js 平台的默认管理工具。它允许开发者轻松安装、共享和分发代码,并有效管理项目依赖关系[^2]。 从小程序基础库版本 **2.2.1** 开始,微信小程序正式支持通过 npm 安装第三方来扩展功能。这使得开发者可以更方便地引入社区已有的高质量组件或工具库。 --- #### 二、具体操作流程 ##### 1. 创建并初始化 npm 项目 在本地创建一个新的小程序项目文件夹,并进入该目录下运行以下命令以初始化 npm: ```bash npm init -y ``` 这条命令会在当前目录生成 `package.json` 文件,用于记录项目的依赖信息和其他元数据。 ##### 2. 添加所需的 npm 根据实际需求选择合适的 npm 进行安装。例如,如果希望集成 Vant WeApp 组件库,则执行如下命令: ```bash npm install vant-weapp --save --production ``` 上述命令的作用是从远程仓库下载指定的 npm 及其子依赖至本地的 `node_modules` 目录,并将其写入到 `package.json` 中作为生产环境下的依赖项[^3]。 > 注意:确保网络连接正常以及能够访问国内镜像源(如淘宝 NPM 镜像),否则可能会遇到加载失败的情况。 ##### 3. 构建 npm 模块 打开微信开发者工具,在菜单栏依次点击 **“工具” -> “构建 npm”** 来触发编译过程。此时,工具会自动读取 `project.config.json` 和 `package.json` 文件的内容,将必要的资源复制到小程序可识别的位置——即 `/miniprogram_npm/` 路径下[^1]。 如果有任何错误提示,请仔细检查是否存在未定义变量或者路径冲突等问题;另外确认已经成功完成了第 2 步骤的操作后再尝试重新构建一次。 ##### 4. 启用“使用 npm 模块” 前往 **“设置” -> “项目设置” -> “本地设置”** 页面,到名为 **“使用 npm 模块”** 的开关按钮并开启此项功能。只有当这个选项被激活以后,才能让最终打出来的产物含来自外部导入的功能逻辑片段。 完成以上全部准备工作之后就可以正常使用基于 npm 提供的各种插件和服务啦! --- #### 三、常见问题排查 - 如果发现无法定位到 `node_modules` 文件夹,请先验证是否确实按照标准方式执行过完整的安装动作。 - 当某些特定场景下面临兼容性挑战时,建议升级最新版的基础 SDK 或者调整目标平台参数设定值。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值