小程序支持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

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