在小程序开发中使用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 相关文章推荐
改善用户体验的五款jQuery插件分享
May 22 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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中的串行化变量和序列化对象
2006/09/05 PHP
php下通过POST还是GET来传值
2008/06/05 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
PHP排序算法类实例
2015/06/17 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
php新建文件的方法实例
2019/09/26 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Python切片知识解析
2016/03/06 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python批量图片处理简单示例
2019/08/06 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
中学语文教学反思
2016/02/16 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python