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 文件中没有其他依赖的情况下。

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

 

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

posted @ 2021-07-14 14:27  savokiss  阅读(8)  评论(0编辑  收藏  举报