Babel preset

React Strict DOM 包含一个 Babel preset 来优化构建。在 web 上是必需的。

概述

该 preset 确保生产构建相对于使用带有高级原子 CSS 解决方案（如 StyleX）的 React DOM 而言，在 web 上没有运行时性能开销。 该 preset 是提取样式到静态 CSS 并优化元素渲染所必需的。

从 react-strict-dom/babel-preset 包子路径导入 preset。 它必须与选项对象一起使用。

babel.config.dom.js

import reactStrictBabelPreset from 'react-strict-dom/babel-preset';

export default function babelConfig() {
  return {
    presets: [
      [reactStrictBabelPreset, { debug: true }]
    ]
  }
};

API

Preset 选项

• debug: boolean (可选)。 默认为 false。 如果设置为 true，则生成的代码中将包含调试信息。 例如，呈现的元素包含一个 data-element-src 属性，其中包含有关负责呈现该元素的文件名和行号的 sourceMap 信息。
• dev: boolean (可选)。 默认为 false。 如果设置为 true，则将包含开发日志，并且样式不会提取到静态 CSS（但会在运行时注入。）
• platform: 'web' | 'native' (可选)。 默认为 web。 目标平台；对于 React Native 构建，必须将其设置为 native。

Preset 方法

• generateStyles(rules)：仅限 Web。 接受收集的样式规则数组。 要生成静态 CSS 文件，必须先收集样式，然后通过此函数将其转换为 CSS 字符串。 接下来，结果应由构建系统写入文件。 下面是一个说明性示例

import reactStrictBabelPreset from 'react-strict-dom/babel-preset';

const styleRules = {};

function transform() {
  const { code, metadata } = await babel.transformAsync(sourceCode, babelConfig);
  if (metadata.stylex != null && metadata.stylex.length > 0) {
    // collect styles from files
    styleRules[id] = metadata.stylex;
  }
  // ...
}

function bundle() {
  const rules = Object.values(styleRules).flat();
  // generate CSS string from all collected styles
  const css = reactStrictBabelPreset.generateStyles(rules);
  // ...write css to file
}