在小程序开发中使用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 form action动态修改方法
Nov 04 Javascript
Prototype Array对象 学习
Jul 19 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
js分页代码分享
Apr 28 Javascript
js中document.write的那点事
Dec 12 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP与SQL注入攻击[一]
2007/04/17 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php 求质素(素数) 的实现代码
2011/04/12 PHP
php数组添加元素方法小结
2014/12/20 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
Jquery attr("checked") 返回checked或undefined 获取选中失效
2013/10/10 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
浅谈javascript对象模型和function对象
2014/12/26 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python标准库sched模块使用指南
2017/07/06 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
党员公开承诺书和承诺事项
2014/03/25 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2014年路政工作总结
2014/12/10 职场文书
中秋客户感谢信
2015/01/22 职场文书
教师个人年度总结
2015/02/11 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python