在小程序开发中使用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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
offsetParent 算法分析
Apr 05 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
js实现网页收藏功能
Dec 17 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
BootstrapValidator实现表单验证功能
Nov 08 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
php实现的任意进制互转类分享
2015/07/07 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python设计一个经典小游戏
2017/05/15 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
教师求职推荐信范文
2013/11/20 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
篝火晚会策划方案
2014/05/16 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
安全教育主题班会教案
2015/08/12 职场文书
安全教育主题班会总结
2015/08/14 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
详解Java实践之建造者模式
2021/06/18 Java/Android