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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

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