@min-kit/helper NPM

@min-kit/helper

Plugins & configs of Tarojs for miniapp

Features

🚀 Enhance compilation configs

defineUserConfig enhances Taro's build configuration for multiple platforms and environments. It also integrates popular third-party plugins.

The multi-environment config files are defined in the config/mode dir
The multi-platform config files are defined in the config/platform dir

Before compiling, execute taro prebuild command to generate the corresponding platform config files (such as project.config.json). At the same time, define the environment configuration (such as DefineConstants).

# generate configs for weapp platform in dev environment
pnpm taro prebuild --type weapp --mode dev
# compile weapp platform in dev environment
pnpm taro build --type weapp --mode dev

# generate configs for alipay platform in prod environment
pnpm taro prebuild --type alipay --mode prod
# compile alipay platform in prod environment
pnpm taro build --type alipay --mode prod

🟢 Steps to use `defineUserConfig`

⓵ First, add config/mode & config/platform config files. For example:

⓶ Then, replace defineConfig with defineUserConfig in config/index.ts:

// config/index.ts

import { defineUserConfig, IProjectConfig } from '@min-kit/helper/taro'

import devConfig from './dev'
import prodConfig from './prod'

export default defineUserConfig((merge, { command, mode }) => {
  const baseConfig: IProjectConfig = {
    // your configs
  }

  if (process.env.NODE_ENV === 'development') {
    return merge({}, baseConfig, devConfig)
  }

  return merge({}, baseConfig, prodConfig)
})

⓷ Enable the integration of third-party plugins via the options of defineUserConfig:

defineUserConfig(() => your_config, {
  ci: true, // enable ci plugin
  tailwindcss: true, // enable tailwindcss plugin
  imageMinimizer: true, // enable image minimizer plugin
})

ci by @tarojs/plugin-mini-ci
- need to install deps:
```
pnpm add -D @tarojs/plugin-mini-ci
```
- the plugin options need to be defined in config/platform

tailwindcss by weapp-tailwindcss

need to install deps:
```
pnpm add -D postcss tailwindcss
```

with config presets:

// tailwind.config.js
module.exports = {
  presets: [require('@min-kit/helper/presets').tailwind],
  // your configs
}
// postcss.config.js
module.exports = require('@min-kit/helper/presets').postcss()

image-minimizer by image-minimizer-webpack-plugin
- optimize SVG with svgo
- optimize JPEG, PNG, WebP, GIF and AVIF images with sharp
bundle-analyzer by webpack-bundle-analyzer
- with command to enable:
```
pnpm taro build --analyzer
```

🚀 Enhance app configs

🟢 Define app.route with `defineRouteConfig`

// src/app.route.ts

import { defineRouteConfig } from '@min-kit/helper/app'

const { Pages, Routes } = defineRouteConfig({
  Home: 'pages/index/index',

  PkgDemo: {
    Home: 'pages/index/index',
  },
})

export { Pages, Routes }

🟢 Define app.config with `defineAppConfigChain`

// src/app.config.ts

import { defineAppConfigChain } from '@min-kit/helper/app'
import { isString } from '@min-kit/shared'

import { Routes } from './app.route'

export default defineAppConfigChain((chain, { env }) => {
  chain
    .entryPagePath(Routes.Home)
    .pages(Object.values(Routes).filter(isString))
    .subPackage('pkg-demo')
    .pages(Object.values(Routes.PkgDemo))
    .end()
    .window({
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTextStyle: 'black',
      navigationBarTitleText: 'WeChat',
    })
    .wechat.debug(env === 'development')
})

🚀 Taro shims in `d.ts`

// types/global.d.ts

/// <reference types="@min-kit/helper" />

// declare your build mode. its related to `config/mode` 👆
declare type Mode = 'dev' | 'prod'

// declare your defined constants. its related to `config/mode` 👆
declare type DefineConstants = {}

More usage examples 👉 https://github.com/rexerwang/min-kit/tree/main/examples