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.
Recommended custom component directory for releasing
The following directory structure is for reference only.
File structure
├── src // The file path of a single custom component
│ ├── index.js
│ ├── index.json
│ ├── index.axml
│ ├── index.acss
│ └── demo // A demonstration of the custom component
│ ├── index.js
│ ├── index.json
│ ├── index.axml
│ └── index.acss
├── app.js // A demonstration of the custom component in a Mini Program
├── app.json
└── app.acss
JSON file sample
// package.json
{
"name": "your-custom-compnent",
"version": "1.0.0",
"description": "your-custom-compnent",
"repository": {
"type": "git",
"url": "your-custom-compnent-repository-url"
},
"files": [
"es"
],
"keywords": [
"custom-component",
"mini-program"
],
"devDependencies": {
"rc-tools": "6.x"
},
"scripts": {
"build": "rc-tools run compile && node scripts/cp.js && node scripts/rm.js",
"pub": "git push origin && npm run build && npm publish"
}
}
js file sample
// scripts/cp.js
const fs = require('fs-extra');
const path = require('path');
// copy file
fs.copySync(path.join(__dirname, '../src'), path.join(__dirname, '../es'), {
filter(src, des){
return !src.endsWith('.js');
}
});
// scripts/rm.js
const fs = require('fs-extra');
const path = require('path');
// remove unnecessary file
const dirs = fs.readdirSync(path.join(__dirname, '../es'));
dirs.forEach((item) => {
if (item.includes('app.') || item.includes('DS_Store') || item.includes('demo')) {
fs.removeSync(path.join(__dirname, '../es/', item));
} else {
const moduleDirs = fs.readdirSync(path.join(__dirname, '../es/', item));
moduleDirs.forEach((item2) => {
if (item2.includes('demo')) {
fs.removeSync(path.join(__dirname, '../es/', item, item2));
}
});
}
});
fs.removeSync(path.join(__dirname, '../lib/'));