在小程序开发中使用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 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
微信小程序block的使用教程
Apr 01 Javascript
浅谈webpack4 图片处理汇总
Sep 12 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中判断变量为空的几种方法分享
2013/08/26 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
Javascript的this用法
2017/01/16 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
python搭建微信公众平台
2016/02/09 Python
python实现拓扑排序的基本教程
2018/03/11 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
《从现在开始》教学反思
2014/04/15 职场文书
理财学专业自荐书
2014/06/28 职场文书
给朋友的道歉短信
2015/05/12 职场文书