在小程序开发中使用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 遍历对象中的子对象
Jul 03 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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和MySQL保存和输出图片
2006/10/09 PHP
基于文本的访客签到簿
2006/10/09 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
javascript radio 联动效果
2009/03/04 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
shell程序中如何注释
2012/02/17 面试题
什么是GWT的Entry Point
2013/08/16 面试题
职业规划书如何设计?
2014/01/09 职场文书
幼儿园门卫制度
2014/01/29 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
关于运动会的广播稿
2014/09/22 职场文书
九九重阳节标语
2014/10/07 职场文书
民主生活会汇报材料
2014/12/15 职场文书
毕业赠语大全
2015/06/23 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript