在小程序开发中使用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 相关文章推荐
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
php注销代码(session注销)
2012/05/31 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
如何在PHP中生成随机数
2020/06/04 PHP
js判断两个日期是否相等的方法
2013/09/10 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
《大自然的语言》教学反思
2014/04/08 职场文书
市场营销毕业求职信
2014/08/07 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python