发布自定义组件

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

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

以下目录结构,仅供参考。

文件结构

  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

JSON 示例

  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. }

JS 文件示例

  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/'));