发布自定义组件

支付宝小程序原生支持引入第三方npm模块,因此,也就支持自定义组件发布到npm,方便开发者复用和分享。

推荐用于发布的自定义组件目录

基于官方的小程序扩展组件库mini-antui的目录结构,供开发者参考,更多信息请参考mini-antui 小程序扩展组件库

  1. // package.json
  2. {
  3. "name": "your-custom-compnent",
  4. "version": "1.0.0",
  5. "description": "your-custom-compnent",
  6. "repository": {
  7. "type": "git",
  8. "url": "your-custom-compnent-repository-url"
  9. },
  10. "files": [
  11. "es"
  12. ],
  13. "keywords": [
  14. "custom-component",
  15. "mini-program"
  16. ],
  17. "devDependencies": {
  18. "rc-tools": "6.x"
  19. },
  20. "scripts": {
  21. "build": "rc-tools run compile && node scripts/cp.js && node scripts/rm.js",
  22. "pub": "git push origin && npm run build && npm publish"
  23. }
  24. }
  1. // scripts/cp.js
  2. const fs = require('fs-extra');
  3. const path = require('path');
  4. // copy file
  5. fs.copySync(path.join(__dirname, '../src'), path.join(__dirname, '../es'), {
  6. filter(src, des){
  7. return !src.endsWith('.js');
  8. }
  9. });
  1. // scripts/rm.js
  2. const fs = require('fs-extra');
  3. const path = require('path');
  4. // remove unnecessary file
  5. const dirs = fs.readdirSync(path.join(__dirname, '../es'));
  6. dirs.forEach((item) => {
  7. if (item.includes('app.') || item.includes('DS_Store') || item.includes('demo')) {
  8. fs.removeSync(path.join(__dirname, '../es/', item));
  9. } else {
  10. const moduleDirs = fs.readdirSync(path.join(__dirname, '../es/', item));
  11. moduleDirs.forEach((item2) => {
  12. if (item2.includes('demo')) {
  13. fs.removeSync(path.join(__dirname, '../es/', item, item2));
  14. }
  15. });
  16. }
  17. });
  18. fs.removeSync(path.join(__dirname, '../lib/'));
  1. ├── src // 用于单个自定义组件
  2. ├── index.js
  3. ├── index.json
  4. ├── index.axml
  5. └── index.acss
  6. ├── ├── demo //用于自定义组件的demo演示
  7. ├── ├── index.js
  8. ├── ├── index.json
  9. ├── ├── index.axml
  10. ├── └── index.acss
  11. ├── app.js // 用于自定义组件小程序demo
  12. ├── app.json
  13. └── app.acss

原文: https://docs.alipay.com/mini/framework/custom-component-publish