在小程序开发中使用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奇异的arguments分析
Oct 20 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
js实现弹幕墙效果
Dec 10 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 dirname(__FILE__)原理及用法解析
2020/10/28 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
一分钟演讲稿
2014/04/30 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
《穷人》教学反思
2016/02/19 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python