发布自定义组件

支付宝小程序原生支持引入第三方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');
  5. // remove unnecessary file
  6. const dirs = fs.readdirSync(path.join(__dirname, '../es'));
  8. dirs.forEach((item) => {
  9.   if (item.includes('app.') || item.includes('DS_Store') || item.includes('demo')) {
  10.     fs.removeSync(path.join(__dirname, '../es/', item));
  11.   } else {
  12.     const moduleDirs = fs.readdirSync(path.join(__dirname, '../es/', item));
  13.     moduleDirs.forEach((item2) => {
  14.       if (item2.includes('demo')) {
  15.         fs.removeSync(path.join(__dirname, '../es/', item, item2));
  16.       }
  17.     });
  18.   }
  19. });
  21. 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