在小程序开发中使用npm的方法

　　

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

　　

<强> 1。在小程序中加载npm包

　　 　　 　　npm安装miniprogram-datepicker——生产 　　 　　

node_modules可以在小程序根目录下,也可以存在于小程序根目录下的各个子目录中。但是不可以在小程序根目录外。使用,生产选项,可以减少安装一些业务无关的npm包,从而减少整个小程序包的大小。

　　

<强> 2。构建npm包

　　

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

　　

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

　　

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

　　

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

　　

在小程序开发中使用npm的方法”> <br/> 　　</p> 　　<p>构建完成后还需要确认项目已勾选了“使用npm模块”。<br/> 　　</p> 　　<p> <img src=

　　

<强> 3。使用npm包

　　

js中引入npm包:

　　 　　 　　const包=要求(“packageName”) 　　 　　

使用npm包中的自定义组件:

　　 　　 　　{ 　　" usingComponents ": { 　　:“datepicker miniprogram-datepicker” 　　} 　　} 　　 　　

miniprogram-datepicker组件运行效果
　　

　　

在小程序开发中使用npm的方法

　　

<强>其他

　　

微信小程序npm支持文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

在小程序开发中使用npm的方法