马哥源码网详解程序源码开发使用npm包的功能

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

微信小程序在发布之初并不支持npm功能，导致很多前端开发者熟悉npm在小程序中的缺陷。

2.2.1版本之后，小程序增加了npm包加载功能，使用npm安装第三方包。

如何加载 npm 包？

关于加载npm包的官​​方文档分析。 在这个动手部分中，我们加载了一个 npm 第三方库 miniprogram-datepicker。 该库用于实现新历和农历的日期选择功能，而官方组件只能选择新历时间。

我们在终端导航到项目文件夹，输入：npm install 命令进行安装。

一定要使用 –production 选项，它可以减少一些不相关的 npm 包的安装，从而减小源包的大小。

构建 npm 包

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

下面简单解释一下原理，以便更好地理解和发布npm包中的需求
首先要了解node_modules目录不涉及编译、上传和打包。 如果要使用 npm 包，则必须经过“构建 npm”的过程。 在最外层的node_modules目录中，会自动生成miniprogram_npm目录，打包好的npm包会存放在里面。

有两种构建包装的方法：

小程序npm包会直接将build文件生成目录下的所有文件复制到miniprogram_npm； 其他 npm 包会通过 js 入口开始打包和文件依赖分析，与 webpack 基本类似。

当你寻找 npm 包时，它有点类似于 npm 的实现。 一层一层往外走，从依赖npm包的文件所在目录开始，直到找到可用的npm包或applet根目录。

注意：

构建完成后，还需要确认项目的“Use npm modules”勾选。

在项目中使用第三方模块

在我们之前的实际项目中，在首页测试这个npm模块的加载情况。

在页面上布局datepicker，保存编译好的工程，点击按钮查看组件的加载情况。

以上就是微信小程序开发使用npm包的功能。 更多相关知识请访问：马哥源码！ ！