miniprogram-vite-builder

1. 打包组件

安装依赖

pnpm add xyvcard-wechat-build -D

修改 package.json 文件

main、types、miniprogram、scripts 字段不可以修改，其余按照项目自行配置

{
  "name": "miniprogram-test",
  "version": "0.0.1",
  "description": "",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "miniprogram": "dist",
  "scripts": {
    "build": "build"
  },
  "keywords": [],
  "author": "",
  "license": "",
  "dependencies": {
    "@vant/weapp": "^1.11.7"
  },
  "devDependencies": {
    "miniprogram-api-typings": "^4.0.7",
    "xyvcard-mini-wechat": "^0.0.3"
  }
}

创建 .npmignore 文件

.idea
.DS_Store
.npmignore
package-lock.json
pnpm-lock.yaml

logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

node_modules
miniprogram
typings
tsconfig.json
project.config.json
project.private.config.json

打包、发布

pnpm build

npm publish

2.使用组件

安装组件

pnpm add miniprogram-test

修改 project.config.json -> setting

{
  ...,
  "setting": {
    ...,
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  },
}

修改 tsconfig.json -> compilerOptions -> paths

{
  "compilerOptions": {
    ...,
    "paths": {
      "miniprogram-test/*": ["./node_modules/miniprogram-test/dist/*"],
      "@/*": ["./miniprogram/*"]
    }
  }
}

建议构建之前重启一次

开发工具菜单栏 -> 工具 -> 构建 npm

scss 文件引用

// 原先
@import "../../styles/variables.scss";

.box {
  &-item {
    color: $color;
  }
}

// 改造
@use "../../styles/variables.scss";

.box {
  &-item {
    color: variables.$color;
  }
}