在小程序开发中使用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 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
angularJS开发注意事项
May 26 Javascript
VUE写一个简单的表格实例
Aug 06 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
python一键去抖音视频水印工具
2018/09/14 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python批量修改交换机密码的示例
2020/09/22 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
物流专业大学生求职信范文
2013/10/28 职场文书
购房意向书
2014/04/01 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书