当前位置：首页>前端>正文

【微信小程序】扩展组件库npm的引入方式（未找到组件或构建npm失败）

前端2024-05-16 18:08:15

背景

为避免重复造轮子，能直接用的东西尽量别自己折腾了。本着这一原则，更何况官方也提供了非常多很好用的扩展组件，例如纵向选项卡组件 - vtabs等。然而！微信的文档真的是太多太乱了，很多东西都是东一块西一块的，就算是API开发工程师估计也头大。这里的“坑”主要也跟项目结构有关，不同项目复杂度这个扩展组件的引入方式也会有所不同，此处仅以我的项目为例做个介绍。

解决方案（步骤）

此处以 vtabs | 微信开放文档为例。

第一步 - npm安装

npm install @miniprogram-component-plus/vtabs
npm install @miniprogram-component-plus/vtabs-content

第二步 - json文件中引入组件

在对应页面的json文件中引入扩展组件

// page.json
{
    "usingComponents": {
        "mp-vtabs": "@miniprogram-component-plus/vtabs",
        "mp-vtabs-content": "@miniprogram-component-plus/vtabs-content"
    }
}

到此为止，是文档教程所提供的步骤，这时候，如果你的项目编译失败，提示XXXXXXXXXXXXXXX路径下未找到组件，可能是由于目录结构的不同，需要做后面的这些配置。

第三步 - 构建npm之前（自定义路径）

如果你的 package.json 并不是在 miniprogram/app.json 的同级目录下，那么你可以参考一下我这个项目的配置，如下：

【微信小程序】扩展组件库npm的引入方式（未找到组件或构建npm失败）,【微信小程序】扩展组件库npm的引入方式（未找到组件或构建npm失败）_小程序npm,第1张

配置说明：在 project.config.json 文件中的 setting 这个字段下添加以下配置：

// 这里需要注意：复制粘贴的时候，一定是要放在 "setting" 这层，位置放错了也是个坑！
// project.config.json - "setting": 
"packNpmManually": true,
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./miniprogram/"
  }
]

对应的另一个官方文档：默认的构建-npm-方式

【微信小程序】扩展组件库npm的引入方式（未找到组件或构建npm失败）,【微信小程序】扩展组件库npm的引入方式（未找到组件或构建npm失败）_小程序npm_02,第2张