All Products
Search
Document Center

Publish custom component

Last Updated: Feb 04, 2021

The mPaaS Mini Program natively supports the introduction of third-party npm modules. Therefore, custom components can be published to npm, which facilitates code reuse and sharing.

The following directory structure is for reference only.

File structure

  1. ├── src // The file path of a single custom component
  2. ├── index.js
  3. ├── index.json
  4. ├── index.axml
  5. ├── index.acss
  6. └── demo // A demonstration of the custom component
  7. ├── index.js
  8. ├── index.json
  9. ├── index.axml
  10. └── index.acss
  11. ├── app.js // A demonstration of the custom component in a Mini Program
  12. ├── app.json
  13. └── app.acss

JSON file sample

  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 file sample

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