微信小程序开发教程043-在小程序开发中使用npm

本文介绍了如何在微信小程序开发中使用npm包的功能，大大提高了微信小app的开发效率。这也是微信小程序系列的视频更新。

微信小程序在发布之初并不支持npm，这也是许多前端开发人员在熟悉npm生态环境后批评微信小app的地方。

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

微信小程序的功能更新最近也很给力，之前给大家介绍过。

1.在小程序中加载npm包

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

截图

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

截图

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

2.构建npm包

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

为了帮助您更好地理解npm软件包版本中提到的要求，下面简要介绍了这些原则：

第一个节点_模块目录将不参与编译、上载和打包。因此，如果一个小程序想要使用npm包，它必须经历“构建npm”的过程_在模块的同一级别目录中会生成一个微型程序_ npm目录将在构建和打包后存储npm包即小程序实际使用的npm包。

构建打包有两种类型：小程序的npm包会直接将构建文件生成目录中的所有文件复制到miniprogram_npm；其他npm包将从条目js文件开始进行依赖性分析和打包过程（类似于webpack）。

搜索npm包的过程类似于npm的实现。它从依赖于npm包的文件目录开始，一层一层地进行，直到找到可用的npm包或applet根目录。

截图

施工完成后，还需要确认项目已检查“使用npm模块”。

截图

3.在项目中使用第三方模块

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

今日最佳</view>

公历</button>

Lunar</button>

{｛item.CreateDateTime｝｝/｛｛item.ArticleAuthor｝}

{{item.ArticleTitle}}

<视图>

｛｛item.TagName｝｝

在页面中布局日期选择器后，保存并完成项目的编译，单击按钮查看组件的加载。

截图

4.项目说明和视频演示

截图

本章附带的视频教程可在上获得。

个人技术视频博客网站：