babel-preset-uniify

统一的 Babel 预设库，支持 React 17/18、Preact、TypeScript 和 Node.js 环境。

安装

npm install --save-dev babel-preset-uniify @babel/core

快速开始

// babel.config.js
module.exports = {
  presets: [['babel-preset-uniify', { type: 'react' }]]
}

环境类型

| 类型 | 说明 | TypeScript | 库模式 | |------|------|:----------:|:------:| | react | React 应用 | ❌ | ❌ | | react-ts | React + TypeScript | ✅ | ❌ | | react-lib | React 库 | ❌ | ✅ | | react-ts-lib | React + TypeScript 库 | ✅ | ✅ | | preact | Preact 应用 | ❌ | ❌ | | preact-ts | Preact + TypeScript | ✅ | ❌ | | preact-lib | Preact 库 | ❌ | ✅ | | preact-ts-lib | Preact + TypeScript 库 | ✅ | ✅ | | h5 | H5 项目 | ❌ | ❌ | | h5-ts | H5 + TypeScript | ✅ | ❌ | | h5-lib | H5 库 | ❌ | ✅ | | h5-ts-lib | H5 + TypeScript 库 | ✅ | ✅ | | node | Node.js | ❌ | ❌ | | node-ts | Node.js + TypeScript | ✅ | ❌ |

配置选项

interface BabelPresetOptions {
  type?: EnvironmentType
  targets?: 'es5' | 'es6' | 'node' | string | string[] | Record<string, string>
  modules?: 'amd' | 'umd' | 'systemjs' | 'commonjs' | 'cjs' | 'esm' | false | 'auto'
  reactVersion?: '17' | '18'
  jsxImportSource?: string
  jsxRuntime?: 'automatic' | 'classic'
  jsxPragma?: string
  jsxPragmaFrag?: string
  jsxPragmaModule?: string
  development?: boolean
  useTransformRuntime?: boolean
}

type

项目环境类型，决定了预设的默认配置。

targets

目标环境配置：

• 'es5' - 兼容到 ES5（React 17 含 IE11，React 18 不含）
• 'es6' - 现代浏览器
• 'node' - Node.js >= 18
• 自定义 - 支持 browserslist 格式

modules

模块输出类型：

• 'auto' - 自动检测（默认）
• 'commonjs' / 'cjs' - CommonJS
• 'esm' / false - ES 模块
• 'amd' / 'umd' / 'systemjs' - 其他格式

jsxRuntime

JSX 运行时模式，决定 JSX 的编译方式。

automatic 模式（默认）

自动导入 JSX 转换函数，无需手动 import React。

{
  presets: [['babel-preset-uniify', {
    type: 'react',
    jsxRuntime: 'automatic'  // 默认值
  }]]
}

// 编译前
function App() { return <h1>Hello</h1> }

// 编译后
import { jsx as _jsx } from "react/jsx-runtime";
function App() { return _jsx("h1", { children: "Hello" }); }

classic 模式

传统 JSX 编译，使用 pragma 指定的工厂函数。

React（默认）：

{
  presets: [['babel-preset-uniify', {
    type: 'react',
    jsxRuntime: 'classic'
  }]]
}
// 编译为：React.createElement('h1', null, ...)

Preact（自动使用 h）：

{
  presets: [['babel-preset-uniify', {
    type: 'preact',
    jsxRuntime: 'classic'
  }]]
}
// 编译为：h('h1', null, ...)

自定义 pragma：

{
  presets: [['babel-preset-uniify', {
    type: 'react',
    jsxRuntime: 'classic',
    jsxPragma: 'h',        // 自定义工厂函数
    jsxPragmaFrag: 'F'     // 自定义 Fragment
  }]]
}

jsxImportSource

JSX 导入源（仅 automatic 模式）：

• 'react' - React（默认）
• 'preact' - Preact（type 为 preact 时默认）
• '@emotion/react' - Emotion
• '@mui/material' - MUI

jsxPragma / jsxPragmaFrag

自定义 JSX 工厂函数（仅 classic 模式）：

| 参数 | React 默认 | Preact 默认 | |------|-----------|------------| | jsxPragma | React.createElement | h | | jsxPragmaFrag | React.Fragment | Fragment |

jsxPragmaModule

pragma 的模块路径（仅 classic 模式），配合 babel-plugin-jsx-pragmatic 自动注入 import。

适用于使用自定义 JSX 工厂函数，且希望 Babel 自动添加 import 语句的场景。

npm install --save-dev babel-plugin-jsx-pragmatic

{
  presets: [['babel-preset-uniify', {
    type: 'preact',
    jsxRuntime: 'classic',
    jsxPragma: 'makeDOM',
    jsxPragmaModule: './lib/dom'
  }]]
}

编译效果：

// 编译前（无需手动 import）
function App() { return <div>Hello</div> }

// 编译后（自动注入 import）
import { makeDOM } from './lib/dom';
function App() { return makeDOM('div', null, 'Hello'); }

development

是否为开发环境，默认根据 NODE_ENV 判断：

• 开发模式：启用热更新插件（react-refresh / prefresh）
• 生产模式：禁用热更新

useTransformRuntime

控制是否使用 @babel/plugin-transform-runtime：

• 库模式默认启用
• 可显式 true / false 覆盖

使用示例

React 应用

module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'react',
    development: process.env.NODE_ENV === 'development'
  }]]
}

React + TypeScript

module.exports = {
  presets: [['babel-preset-uniify', { type: 'react-ts' }]]
}

React 库（ES 模块输出）

module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'react-lib',
    targets: 'es6',
    modules: false
  }]]
}

Preact + Classic 模式

配合 tsconfig.json 的 "jsx": "preserve"：

// babel.config.js
module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'preact',
    jsxRuntime: 'classic'  // 自动使用 h() 和 Fragment
  }]]
}

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

Preact + Classic + 自定义 pragma

使用自定义 JSX 工厂函数，配合 babel-plugin-jsx-pragmatic 自动注入：

// babel.config.js
module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'preact',
    jsxRuntime: 'classic',
    jsxPragma: 'makeDOM',
    jsxPragmaModule: path.resolve(__dirname, './lib/dom')
  }]]
}

// lib/dom.js
import { h, render, Component } from 'preact';

export let makeDOM = (type, props, ...children) => {
    console.log('==>dom', type, props, children);
    return { type, props, children };
};

export let renderDom = render;

Preact + Automatic 模式

module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'preact'  // 默认 automatic，importSource 自动设为 'preact'
  }]]
}

Node.js + TypeScript

module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'node-ts',
    targets: 'node >= 18'
  }]]
}

Emotion CSS-in-JS

module.exports = {
  presets: [['babel-preset-uniify', {
    type: 'react',
    jsxImportSource: '@emotion/react'
  }]]
}

特性说明

自动目标环境

根据 type 和 reactVersion 自动配置目标浏览器：

• es5 - React 17 支持 IE11，React 18 不支持
• es6 - 现代浏览器
• node - Node.js >= 18

智能模块处理

根据项目类型自动选择模块输出：

• 库模式 → ES 模块
• Node 环境 → CommonJS
• 其他 → 自动检测

Polyfill 策略

| 场景 | useBuiltIns | 说明 | |------|-------------|------| | 应用（react/preact/h5） | usage | 按需注入 | | 库模式 | false | 不注入 | | Node 环境 | false | 不注入 |

热更新

开发环境自动启用：

• React → react-refresh
• Preact → @prefresh/babel-plugin

库模式优化

• 使用 @babel/plugin-transform-runtime
• 绝对路径解析 runtime
• 避免 polyfill 污染

常见问题

如何支持 IE11？

{
  type: 'react',
  reactVersion: '17',  // React 17 支持 IE
  targets: 'es5'
}

库模式需要安装什么？

npm install @babel/runtime-corejs3 --save

如何禁用 transform-runtime？

{
  type: 'react-lib',
  useTransformRuntime: false
}

如何使用自定义 JSX 工厂？

{
  type: 'react',
  jsxRuntime: 'classic',
  jsxPragma: 'createElement',  // 自定义工厂
  jsxPragmaFrag: 'createFragment'
}

License

ISC