# miniprogram-vite-builder

# 1. 打包组件

## 安装依赖

```sh
pnpm add xyvcard-wechat-build -D
```

## 修改 package.json 文件

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

```json
{
  "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
```

## 打包、发布

```sh
pnpm build

npm publish
```

# 2.使用组件

## 安装组件

```sh
pnpm add miniprogram-test
```

## 修改 project.config.json -> setting

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

## 修改 tsconfig.json -> compilerOptions -> paths

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

### 建议构建之前重启一次

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

## scss 文件引用

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

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

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

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