在小程序开发中使用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之水平横向滚动歌词同步的应用
May 07 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
JS沙箱模式实例分析
Sep 04 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
JS回调函数深入理解
Oct 16 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
杏林同学录(六)
2006/10/09 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
jQuery的学习步骤
2011/02/23 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python支持多线程的爬虫实例
2019/12/21 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
党员教师工作决心书
2014/03/13 职场文书
门前三包责任书
2014/04/15 职场文书
小班教师个人总结
2015/02/05 职场文书
电视新闻稿
2015/07/17 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang