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


Posted in Javascript onOctober 17, 2018

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

1. 在小程序中加载 npm 包

npm install miniprogram-datepicker --production

node_modules可以 在小程序根目录下,也可以存在于小程序根目录下的各个子目录中。但是不可以 在小程序根目录外。使用--production选项,可以减少安装一些业务无关的 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的方法

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

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

3.使用npm包

js 中引入 npm 包:

const package = require('packageName')

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

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

miniprogram-datepicker组件运行效果

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

其他

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

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

Javascript 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
最短的IE判断代码
Mar 13 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 #Javascript
element-ui的回调函数Events的用法详解
Oct 16 #Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 #Javascript
Postman的下载及安装教程详解
Oct 16 #Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 #Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 #Javascript
You might like
PHP4实际应用经验篇(9)
2006/10/09 PHP
解析php中memcache的应用
2013/06/18 PHP
php事务处理实例详解
2014/07/11 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
Anaconda下安装mysql-python的包实例
2018/06/11 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python 多个参数不为空校验方法
2019/02/14 Python
python字典一键多值实例代码分享
2019/06/14 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Python实现密码薄文件读写操作
2019/12/16 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python使用xpath实现图片爬取
2020/09/16 Python
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
教师工作能力自我评价
2015/03/04 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL