uni-app 项目使用 npm 包中的小程序自定义组件

本文主要是介绍uni-app 项目使用 npm 包中的小程序自定义组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

原理

1. postinstall 时将 `node_modules` 下的小程序组件包复制到 `wxcomponents` 目录下

2. 第三方包建议只用 `package.json` 管理，所以将代码加入 .gitignore 中

核心代码

// scripts/pkg-copy.js
// 本脚本用于将原生 npm 组件复制到 wxcomponents 文件夹
const fs = require('fs-extra')
const path = require('path')

// 需要复制的包
const pkgList = [
  {
    from: 'some-mp-component/miniprogram_dist',
    to: 'my-mp-component'
  }
]

const npmPath = path.join(__dirname, '../node_modules')
const distPath = path.join(__dirname, '../src/wxcomponents')

function copyPkg (pkg) {
  const from = `${npmPath}/${pkg.from}`
  const to = `${distPath}/${pkg.to}`
  fs.copySync(from, to)
}

然后在 package.json 配置 postinstall 命令。这样在 npm install 之后就会自动复制该包到 `wxcomponents`

  "scripts": {
    "postinstall": "node scripts/pkg-copy"
  },

配置 .gitignore

src/wxcomponents/my-mp-component

总结

简单的使用第三方 npm 包配置就完成了，注意此种方法只适用于第三方包的自定义组件的 json 文件中没有其他依赖的情况下。

如果需要处理有其他依赖的小程序自定义组件，需要考虑依赖解析的方案。

笔者也在研究这块，可以继续关注本博客哦~

这篇关于uni-app 项目使用 npm 包中的小程序自定义组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！