@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:

• examples/taro-app/config/mode
• examples/taro-app/config/platform

⓶ 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