如何在微信小程序开发中使用 npm 中包的功能?

1. 什么是 npm

npm 是 Node.js 的包管理器,可以帮助我们轻松地安装、升级、删除 Node.js 模块。它是包含在 Node.js 的安装包中的,当您安装 Node.js 时,npm 会同时安装在您的计算机上。npm 是一个庞大的包仓库,上面您可以找到数以百万计的现成的模块,可以被用于各种各样的项目,包括服务器后端、前端 Web 应用,甚至包括移动应用或桌面应用。

2. 小程序如何使用 npm 包

2.1 开启小程序npm支持

在使用小程序中的 npm 之前,需要通过微信开发者工具开启相关选项。打开微信开发者工具,选中需要开启该功能的小程序,进入 “详情” 页面,在 “本地设置” 栏目中找到 “使用 npm 模块”选项,并勾选之。

"npm": true

2.2 安装需要使用的 npm 包

打开微信开发者工具中的终端,进入小程序项目根目录,

直接输入需要安装的 npm 包名称,并点击安装即可。小程序默认会将安装的 npm 包放置在项目根目录下的 “miniprogram_npm” 文件夹中,并会自动生成一个新的文件夹,该文件夹的名字为模块名。例如,需要安装 lodash 模块,直接使用以下命令进行安装:

npm install lodash

2.3 在小程序中使用 npm 包

在小程序中使用 npm 包跟在 Node.js 差不多,只需要通过 require() 方法引用即可。

const _ = require('lodash');

值得注意的是,小程序支持的 CommonJS 规范是非常有限的,不能使用所有 Node.js 和 Web 通用的模块加载方式。因此,如果 npm 包中使用了类似 fs 模块的核心模块或者 http 协议相关的模块就无法在小程序中使用。需要使用小程序 提供的接口对数据进行读取和请求。

3. 给小程序引入一个外部的npm包

现在假设我们需要给小程序引入一个已经发布到 npm 上的第三方包,例如Moment.js,操作步骤:

3.1 下载 moment.js 包

我们首先需要到 Moment.js 的官网(https://momentjs.com/)查看一下它的版本,找到适合的版本,例如我们选择了 2.24.0 版本,我们打开终端,进入小程序根目录,输入命令:

npm install moment@2.24.0 --save

上面的代码将 2.24.0 版本的 Moment.js 包下载到当前小程序项目的 node_modules 目录下,并在 package.json 文件进行了记录。

3.2 给小程序引入 Moment.js 包

我们在需要使用 Moment.js 的小程序页面中,进行如下代码编写:

const moment = require('moment');

const date = moment().format('YYYY-MM-DD');

console.log('当前日期:' + date);

上面的代码导入了 Moment.js,并使用 moment() 方法获取当前时间并转化为 YYYY-MM-DD 格式的时间字符串输出到控制台。

4. 总结

通过使用 npm 可以在小程序中快速便捷地引入第三方包,并且后续的升级和处理都非常方便。但是,在使用 npm 之前需要开启小程序 npm 支持,安装 npm 包后才可以进行引用,同时需要注意小程序中支持的 CommonJS 规范有限,无法使用所有 Node.js和 Web 通用的模块加载方式。