微信小程序如何开发加载npm包？方法介绍（微信小程序导入包含）

本文介绍了如何在微信小程序开发中使用npm包的功能，大大提高了微信小程序的开发效率，也是微信小程序系列教程的视频版本更新。【相关学习推荐:小程序开发教程】

微信小程序在发布之初并不支持npm，这也是很多前端开发者在熟悉npm生态环境后，对微信小程序诟病的地方。

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

微信小程序的功能更新最近也很厉害。比如之前给大家介绍的微信小程序开发平台的新功能“云开发”，就是快速体验。

在applet中加载npm包

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

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

这里一定要使用–- production选项，它可以减少一些业务无关的npm包的安装，从而减小整个小包的大小。

构建npm包

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

为了帮助您更好地理解npm包中提到的要求，下面是对该原则的简要介绍:

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

构建包有两种:applet的npm包会直接将构建文件生成目录下的所有文件复制到miniprogram _ npm其他npm包将从入口js文件开始进行依赖分析和打包过程(类似于webpack)。

查找npm软件包的过程类似于npm的实施，从依赖于npm软件包的文件所在的目录开始，逐层查找，直到找到可用的npm软件包或applet根目录。

在构建完成后，还需要确认已经为该项目选中了“使用npm模块”。

在项目中使用第三方模块

在我们之前的实际项目中，我们测试了这个npm模块在主页上的加载。

在页面中布局datepicker，保存并编译项目后，单击按钮查看组件的加载。

更多编程相关知识，请访问:编程入门！！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：微信小程序如何开发加载npm包？方法介绍（微信小程序导入包含） https://zhujicankao.com/113243.html