@kinngyo/weapack-preset-weapp

微信小程序构建预设，提供一组可直接用于 @kinngyo/weapack 的默认配置。预设按文件类型拆分 pipeline，支持静态资源复制、JavaScript/TypeScript 转译、Less 编译和 Sass 编译，并默认启用文件级增量监听。

安装

npm install -D @kinngyo/weapack @kinngyo/weapack-preset-weapp @swc/core

要求 Node.js >=20.19.0。

如果需要 Less 或 Sass，请按需安装：

npm install -D less sass

快速开始

在项目根目录创建 weapack.config.ts：

import { defineConfig } from '@kinngyo/weapack'
import { createWeappPreset } from '@kinngyo/weapack-preset-weapp'

export default defineConfig(createWeappPreset())

默认读取 src 目录。自定义源码目录：

export default defineConfig(createWeappPreset({ srcDir: 'miniprogram' }))

运行构建：

npx weapack build

运行监听：

npx weapack watch

默认处理

| 文件类型 | 处理方式 | 输出 | | --- | --- | --- | | .wxs、.json、.wxml、.d.ts | 静态复制，.d.ts 同时参与 TypeScript 声明生成上下文 | 保持原扩展名 | | .png、.jpg、.jpeg、.gif、.webp、.svg | 静态复制 | 保持原扩展名 | | .js | 默认复制；配置 javascript.transform: true 后使用 SWC 转译 | .js | | .ts | 默认启用 TypeScript 处理，使用 SWC 输出 JavaScript | .js，默认额外生成 .d.ts | | .less | 显式启用后使用 Less 编译 | .wxss | | .scss | 显式启用后使用 Sass 编译 | .wxss |

按需依赖

预设内置 JavaScript、TypeScript、Less、Sass 处理能力，但不会强制安装所有可选编译器。

| 功能 | 触发条件 | 需要安装 | | --- | --- | --- | | JavaScript 转译 | javascript.transform: true | @swc/core | | TypeScript 编译 | 未设置 typescript: false | @swc/core | | Less 编译 | less: true 或传入 Less 选项 | less | | Sass 编译 | sass: true 或传入 Sass 选项 | sass |

如果启用了对应功能但未安装依赖，运行时会抛出明确提示，例如：

[weapack-preset-weapp] 请安装 @swc/core：npm i -D @swc/core

选项

interface WeappPresetOptions {
    srcDir?: string
    javascript?: false | JavaScriptPluginOptions
    typescript?: false | TypeScriptPluginOptions
    less?: boolean | LessPluginOptions
    sass?: boolean | SassPluginOptions
}

JavaScript

默认处理 .js 文件，但只复制，不转译：

export default defineConfig(createWeappPreset())

启用 SWC 转译：

export default defineConfig(
    createWeappPreset({
        javascript: {
            transform: true,
            target: 'es2018',
        },
    }),
)

禁用 .js 处理：

export default defineConfig(
    createWeappPreset({
        javascript: false,
    }),
)

支持的 JavaScript 选项：

| 字段 | 类型 | 说明 | | --- | --- | --- | | transform | boolean | 是否启用 SWC 转译 | | target | string | SWC 输出目标，默认 es2018 | | format | 'iife' \| 'cjs' \| 'esm' | 输出模块格式，分别映射到 SWC 的 umd、commonjs、es6 | | sourcemap | boolean \| 'inline' \| 'external' \| 'both' | sourcemap 配置；inline 会生成内联 sourcemap，其余真值会生成普通 sourcemap | | minify | boolean | 是否启用 SWC 压缩 |

TypeScript

默认启用 .ts 编译，并生成 .d.ts 声明文件。源码目录中的 .d.ts 会作为静态文件复制，也会参与声明生成上下文。

禁用 TypeScript 处理：

export default defineConfig(
    createWeappPreset({
        typescript: false,
    }),
)

传入编译选项：

export default defineConfig(
    createWeappPreset({
        typescript: {
            target: 'es2018',
            declaration: false,
            minify: true,
        },
    }),
)

支持的 TypeScript 选项：

| 字段 | 类型 | 说明 | | --- | --- | --- | | target | string | SWC 输出目标，默认 es2018 | | format | 'iife' \| 'cjs' \| 'esm' | 输出模块格式，分别映射到 SWC 的 umd、commonjs、es6 | | sourcemap | boolean \| 'inline' \| 'external' \| 'both' | sourcemap 配置；inline 会生成内联 sourcemap，其余真值会生成普通 sourcemap | | minify | boolean | 是否启用 SWC 压缩 | | declaration | false | 设置为 false 时不生成 .d.ts |

Less

默认不处理 .less。启用 Less：

export default defineConfig(
    createWeappPreset({
        less: true,
    }),
)

传入 Less 编译器选项：

export default defineConfig(
    createWeappPreset({
        less: {
            compilerOptions: {
                paths: ['node_modules', 'src/styles'],
            },
        },
    }),
)

Sass

默认不处理 .scss。启用 Sass：

export default defineConfig(
    createWeappPreset({
        sass: true,
    }),
)

Sass 默认输出展开格式，如需压缩可显式设置 style: 'compressed'：

export default defineConfig(
    createWeappPreset({
        sass: {
            compilerOptions: {
                style: 'compressed',
                loadPaths: ['node_modules', 'src/styles'],
            },
        },
    }),
)

完整示例

import { defineConfig } from '@kinngyo/weapack'
import { createWeappPreset } from '@kinngyo/weapack-preset-weapp'

export default defineConfig(
    createWeappPreset({
        srcDir: 'src',
        javascript: {
            transform: true,
            target: 'es2018',
        },
        typescript: {
            declaration: false,
        },
        less: true,
        sass: {
            compilerOptions: {
                style: 'compressed',
            },
        },
    }),
)

自定义组装

如果默认规则不满足项目需求，可以直接使用内置导出的插件自行组装 weapack 配置。

import { defineConfig } from '@kinngyo/weapack'
import {
    createJavaScriptPlugin,
    createLessPlugin,
    createSassPlugin,
    createTypeScriptPlugin,
} from '@kinngyo/weapack-preset-weapp'

export default defineConfig([
    {
        name: 'copy-weapp-assets',
        input: 'src/**/*.{wxs,json,wxml,d.ts,png,jpg,jpeg,gif,webp,svg}',
        base: 'src',
        watch: { incremental: 'file' },
    },
    {
        name: 'compile-javascript',
        input: 'src/**/*.js',
        base: 'src',
        plugins: [
            createJavaScriptPlugin({
                transform: true,
                target: 'es2018',
            }),
        ],
        watch: { incremental: 'file' },
    },
    {
        name: 'compile-typescript',
        input: ['src/**/*.ts', '!src/**/*.d.ts'],
        base: 'src',
        plugins: [
            createTypeScriptPlugin({
                declaration: false,
                target: 'es2018',
            }),
        ],
        watch: { incremental: 'file' },
    },
    {
        name: 'compile-less',
        input: 'src/**/*.less',
        base: 'src',
        outExtension: { '.css': '.wxss' },
        plugins: [
            createLessPlugin({
                compilerOptions: {
                    paths: ['node_modules', 'src/styles'],
                },
            }),
        ],
        watch: { incremental: 'file' },
    },
    {
        name: 'compile-sass',
        input: 'src/**/*.scss',
        base: 'src',
        outExtension: { '.css': '.wxss' },
        plugins: [
            createSassPlugin({
                compilerOptions: {
                    style: 'compressed',
                    loadPaths: ['node_modules', 'src/styles'],
                },
            }),
        ],
        watch: { incremental: 'file' },
    },
])

导出

| 导出 | 说明 | | --- | --- | | createWeappPreset | 创建微信小程序默认预设配置 | | createJavaScriptPlugin | 创建 JavaScript 处理插件 | | createLessPlugin | 创建 Less 编译插件 | | createSassPlugin | 创建 SCSS 编译插件 | | createTypeScriptPlugin | 创建 TypeScript 编译插件 | | version | 当前包版本 | | WeappPresetOptions | 预设选项类型 | | WeappPresetConfig | 预设返回类型 | | JavaScriptPluginOptions | JavaScript 插件选项类型 | | LessPluginOptions | Less 插件选项类型 | | SassPluginOptions | Sass 插件选项类型 | | TypeScriptPluginOptions | TypeScript 插件选项类型 |