笔者在开发小程序项目过程中遇到了需要使用第三方npm包的场景，比如说使用mqtt、protobuf等。在笔者之前的文章微信小程序使用mqtt之详细的避坑指南中提到既可以通过npm的方式也可以通过mqtt的压缩文件的方式使用mqtt。但经过笔者测试发现npm的方式使用mqtt有很多问题，所以对于mqtt就使用了压缩文件。

事实上，不可能每个npm包在使用的时候都有问题，所以本文就以使用node.js的buffer为例说明如何在微信小程序中使用npm包。

设置miniprogramRoot

通过阅读文档（参考资料【1】、【2】）我们需要注意三点：

1.miniprogramRoot用于指定指定小程序源码的目录

2.npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内

3.miniprogramRoot 字段不存在时，miniprogramRoot 就是 project.config.json 所在的目录

这三点汇成一句话就是：设置一下miniprogramRoot ，依赖应该被安装到miniprogram目录下。

同时注意到笔者的小程序目录结构如下图所示：

小程序的代码是在miniprogram目录下，project.config.json（项目配置文件）位于根目录下，如果此时运行npm install xxx 那么依赖会被安装，根目录下会多出一个node_modules文件夹，根目录下的package.json的dependencies中也会记录该依赖。但这样显然不对，因为上文提到的需要注意的三点，我们可以知道依赖应该被安装到miniprogram目录下，所以我们需要设置miniprogramRoot字段。

{
  "miniprogramRoot": "miniprogram/"
}

安装依赖

由于miniprogram目录下默认是没有package.json文件的，所以需要先运行命令 npm init -y 为其生成package.json文件，之后就可以正常安装依赖了，如下图所示：

安装完后，可以看到miniprogram目录下的package.json文件的dependencies字段中，记录了buffer

依赖的构建

依赖安装成功后，可以点击开发者工具中的菜单栏：工具 --> 构建 npm，对依赖进行构建。感兴趣的读者可以阅读文档（文末参考资料【3】）来了解小程序对npm包构建的原理。

构建完成后，就可以看到miniprogram目录下多了一个miniprogram_npm文件夹，里面会存放构建打包后的 npm 包。然后我们就可以在代码中使用安装的依赖啦：import { Buffer } from 'buffer'。

解决代码质量扫描出现的问题

笔者注意到，在安装和构建完npm后，进行代码质量扫描的时候发现了“存在无依赖文件的问题”，如下图所示：

点击上图中的“点击查看”，进入到代码依赖分析面板，在左侧选择无依赖文件，可以发现有两个无依赖文件：

在无依赖文件上点击右键，然后点击打开：

可以看到这个package.json是miniprogram目录下的package.json：

我们可以通过project.config.json文件的packOptions.ignore 字段对这两个文件进行忽略：

{
  "packOptions": {
    "ignore": [
        {
          "value": "package-lock.json",
          "type": "file"
        },
        {
          "value": "package.json",
          "type": "file"
        }
      ],
   }
}

这样配置后，重新进行代码扫面可以发现代码质量就没有问题了，如下图所示：

思考：构建的依赖是否会被上传

最后我们思考一个问题：构建后的依赖是否会被上传呢？答案是肯定的，因为这个依赖是必须的，就好比我们进行vue项目开发时package.json中的dependencies字段中的依赖会被打包一样。我们上传一下代码，上传成功后提示如下图所示：

由图可知，miniprogram目录下的package.json和package-lock.json以及node_modules目录没有被打包上传。同时，miniprogram_npm目录下也有文件没被上传，看到这里请不要慌，注意这些文件都是index.js.map文件，项目真正需要的index.js文件已经上传了。如下图所示：

总结

小程序中可以使用npm包后真的可以解放生产力，打开格局，使得小程序也可以开发更复杂的功能。本文详细地介绍了微信小程序中如何安装、构建以及使用npm包，需要注意如下4点：

1.miniprogramRoot用于指定指定小程序源码的目录；当miniprogramRoot 字段不存在时，miniprogramRoot 就是 project.config.json 所在的目录；npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内。

2.依赖安装成功后，需要点击开发者工具中的菜单栏：工具 --> 构建 npm，对依赖进行构建。

3.miniprogram目录下的package.json文件和package-lock.json文件属于无依赖文件，可以通过设置project.config.json文件的packOptions.ignore 字段对这两个文件进行忽略。

4.构建后的npm依赖会在代码上传的时候被上传，而node_modules等则不会被上传。

本文正在参加「金石计划」，欢迎一起参与！