微信小程序如何加载npm包

angryTom

发布时间：2020-03-13 10:15:29

3473人浏览过

来源于zixun.jisuapp.cn

转载

本文介绍了如何在微信小程序开发中使用npm中包的功能，大大提高微信小程序的开发效率，希望对学习微信小程序开发的朋友有帮助！

微信小程序如何加载npm包

微信小程序如何加载npm包

微信小程序在发布之初没有对 npm 的支持功能，这也是目前很多前端开发人员在熟悉了 npm 生态环境后，对微信小程序诟病的地方。

微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持，使得小程序支持使用 npm 安装第三方包。

微信小程序的功能更新最近更新的也非常给力，如之前给大家介绍的微信小程序开发平台新功能「云开发」快速上手体验。

推荐学习：小程序开发

在小程序中加载 npm 包

微信小程序关于 npm 包的加载使用官方文档在这里，此实战部分我们通过加载一个 npm 的第三方库 miniprogram-datepicker ，此类库用于实现公历与农历的日期选择功能，而微信小程序官方的组件只能简单地选择一个公历时间。

在终端中定位到微信小程序的项目文件夹，通过 npm 的安装命令安装。

此处请务必使用 –production 选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。

构建 npm 包

在微信小程序开发工具的「工具」菜单下点击「构建 npm」命令，进行 npm 包的构建，此构建可以将 npm 包构建成在小程序中可加载使用的包。

Imagine By Magic Studio

AI图片生成器，用文字制作图片

下载

为了帮助大家更好的理解发布 npm 包中提到的各种要求，这里简单介绍一下原理：

首先 node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。

构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中；其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（类似 webpack）。

寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。

构建完成后还需要确认项目已勾选了「使用 npm 模块」。

在项目中使用第三方模块

在我们之前实战项目中，在首页中测试下此 npm 模块的加载。

在页面中布局完 datepicker 后，保存并完成项目的编译后，点击按钮即可看到组件的加载情况。

更多微信小程序开发教程，请关注PHP中文网！

小程序自动营销,不用人工盯

开发公司跑路,小程序数据怎么办?

直播带货小程序,功能开通步骤!

老小程序改版,优先优化这5点!

不会运营?小程序自带简单玩法

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！

下载

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

530

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

760

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

6228

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

492

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

221

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

240

2023.09.14

js截取字符串的方法介绍

JavaScript字符串截取方法，包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求，灵活地截取字符串的不同部分。在实际开发中，根据具体情况选择合适的方法进行字符串截取，能够提高代码的效率和可读性。

303

2023.09.21

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

热门下载

网站特效

网站源码

网站素材

前端模板