小程序支持npm包

一段时间没看小程序的文档,突然发现小程序现在支持npm包了,感觉整个人都萌萌哒
事不宜迟 贴上文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

小程序支持npm包从版本2.2.1的基础库开始 ,开发的时候需要使用beta版本开发工具 ,下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

工具搞定啦啦啦啦:
需要在小程序根目录 npm install --production >>>温馨提示:【npm比较慢 的情况下,可以安装下cnpm】

安装--production 目的是减少安装一些业务无关的包,从而减少整个小程序的大小。

测试下是否可以用npm包
随便在npm官网找个包来玩玩 ,就js-base64 吧
https://www.npmjs.com/package/js-base64

记得安装对应的npm包哦如: cnpm install js-base64

在index.js中引入
// pages/npm/index.js
// const Base64 = require('js-base64').Base64;
import { Base64} from 'js-base64' //比较喜欢这种写法
console.log(Base64);

引入之后,console一直报错,找不到模块如module "pages/npm/js-base64" is not defined
这个时候要检测是否没有安装npm包
还有就是要记得npm构建,npm构建,npm构建

详情面板 勾选“使用 npm 模块”选项:
点击开发者工具中的菜单栏:工具 --> 构建 npm

【【有个重点需要注意点】】
构建npm 有提示 “没有找到可以构建的NPM包” 这个时候除了看下开发工具里 使用npm模块 有没有打钩,如果有,还出现 那就尝试跑下如下命令 :
npm install miniprogram-sm-crypto --production

image.png

npm构建成功,这个时候你会发现小程序的根目录出现了 miniprogram_npm这个文件夹
引用的npm包也可以用了,例子如下: 【好记性不如烂笔头,此篇纯属个人笔记,记录下免得忘记 】

有个不足之处就是开发工具上没有比较明显 【npm构建 】按钮

QQ图片20180827112706.png

【 重点啦啦啦!!!!】】】】】】
今天2019年11月26日,发现小程序引入npm包有点微妙的变化 ,下面我贴下,我重新温故然后掉坑一遍的流程图
(1)搭建完项目之后,由于需要引入npm包,所以需要实例化 所以要先执行 npm init

我就是没有这么做,按照官网直接就去npm install了,所以踩了个坑如下图所示啦!!!!!!

1引入npm.png

(2)初始化后,引入了相关的npm包后,要工具 ——> 构建npm 氮素 ,又掉进坑了 如图所示

2引入npm.png

图中的命令是:npm install miniprogram-sm-crypto --production

(3)按照图从坑爬出来了,重新构建npm之后看到了胜利的曙光,如下图所示啦!!!


3引入npm.png

最近需要搞小程序插件,由于小程序插件的功能也有这部分npm引用的问题,所以步骤基本是一致的,不同的点是 npm包是在plugin根目录下
如图所示:

image.png

最后感慨下:一晃一年过去了,上面当初的笔记温故了下发现有所不同,哈哈,不过技术在更新, 难免会出现这样那样的问题,如果遇到,不急躁,静下心来,掉坑了慢慢爬出来,等爬出来的时候,你就获得了一个宝贵的经验,你说呢 ? 就是需要遇到问题,才能有所长进,长见识长经验,我去搬砖了,还有个大坑等着我去跳去填啦,拜拜

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
    不忘初心_9a16阅读 8,461评论 0 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,475评论 25 709
  • 1、npm是什么? NPM (node package manager),通常称为node包管理器。顾名思义,它的...
    徐国军_plus阅读 11,899评论 1 6
  • 求学生涯最不喜欢的就是命题作文,不喜欢连有感而发的写作也需要由死板的题目来禁锢,因此成为了理科生。毕业后除了博客上...
    凌听生涯规划阅读 3,950评论 6 7
  • 我痴情的,为你写下 一首首情诗 只能这样,才能留下 喜欢你的证据 喜欢你的清新,自然 你的温度,如此宜人 你的一笑...
    冷冬年阅读 3,085评论 18 40