支付寶小程序框架 自定義組件·發(fā)布

支付寶小程序原生支持引入第三方 npm 模塊。因此，自定義組件也支持發(fā)布到 npm，方便開(kāi)發(fā)者復(fù)用和分享。

文件結(jié)構(gòu)

以下是發(fā)布自定義組件的推薦文件結(jié)構(gòu)，僅供參考 。

├── src // 單個(gè)自定義組件文件夾
│   ├── index.js
│   ├── index.json
│   ├── index.axml
│   ├── index.acss
│   └── demo // 自定義組件的演示 Demo 文件夾
│       ├── index.js
│       ├── index.json
│       ├── index.axml
│       └── index.acss
├── app.js // 為自定義組件小程序 Demo 配置 app.js 文件
├── app.json
└── app.acss

JSON 示例

// 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 文件示例

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