在小程序开发中使用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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
西德产收音机
2021/03/01 无线电
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
最短的IE判断代码
2011/03/13 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
法学院方阵解说词
2014/01/29 职场文书
高三自我评价
2014/02/01 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
基层工作经验证明样本
2014/11/16 职场文书
太行山上观后感
2015/06/05 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang