在小程序开发中使用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函数
Oct 16 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
Express框架之connect-flash详解
May 31 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 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 递归效率分析
2009/11/24 PHP
PHP输入流php://input介绍
2012/09/18 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python的几种开发工具介绍
2007/03/07 Python
python传递参数方式小结
2015/04/17 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python实现简单成绩录入系统
2019/09/19 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
python代码实现图书管理系统
2020/11/30 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
司机岗位职责说明书
2014/07/29 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2014年材料员工作总结
2014/11/19 职场文书
见习期个人总结
2015/03/05 职场文书
学生犯错保证书
2015/05/09 职场文书
垂直极限观后感
2015/06/08 职场文书
宾馆安全管理制度
2015/08/06 职场文书
公司晚会主持词
2019/04/17 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript