环境设置

了解如何配置使用 React Strict DOM 所需的环境。

Expo 框架

Expo 是一个生产级别的跨平台 React 框架，是使用 React Strict DOM 创建应用程序的推荐解决方案。本指南其余部分的说明是针对 Expo 量身定制的，但读者可以对其进行调整以与其他框架一起使用。

按照 Expo 指令了解如何创建一个新项目。React Strict DOM 需要使用新的 React Native 架构。然后按照安装指南中的步骤安装 React Strict DOM。

一个使用 React Strict DOM 的 Expo 设置的工作示例可以在这个示例应用程序中找到。

Babel 配置

创建或修改 babel.config.js 文件，如下所示。这用于优化构建并启用 Web 的 CSS 静态提取。了解如何在 API 文档中配置 babel-preset。

babel.config.js
const reactStrictPreset = require('react-strict-dom/babel-preset');

function getPlatform(caller) {
  // This information is populated by Expo
  return caller && caller.platform;
}

function getIsDev(caller) {
  // This information is populated by Expo
  if (caller?.isDev != null) return caller.isDev;
  // https://babel.node.org.cn/docs/options#envname
  return (
    process.env.BABEL_ENV === 'development' ||
    process.env.NODE_ENV === 'development'
  );
}

module.exports = function (api) {
  // If not using Expo, set these values manually or by other means
  const platform = api.caller(getPlatform);
  const dev = api.caller(getIsDev);

  return {
    plugins: [],
    presets: [
      // Expo's babel preset
      'babel-preset-expo',
      // React Strict DOM's babel preset
      [reactStrictPreset, {
        debug: dev,
        dev,
        platform
      }]
    ]
  };
};

PostCSS 配置

PostCSS 是一个用于生成 CSS 的工具。它在 Expo 中默认启用，并且是将 React Strict DOM 样式提取到 Web 构建的静态 CSS 的推荐方法。一旦安装了 postcss-react-strict-dom 插件，就可以用来提取样式。创建 postcss.config.js 文件，如下所示。

postcss.config.js
module.exports = {
  plugins: {
    'postcss-react-strict-dom': {
      include: [
        // Include source files to watch for style changes
        'src/**/*.{js,jsx,mjs,ts,tsx}',
        // List any installed node_modules that include UI built with React Strict DOM
        'node_modules/<package-name>/*.js'
      ]
    },
    autoprefixer: {}
  }
};

Metro 配置

Metro 是 Expo 和 React Native 使用的打包器。它可以为原生和 Web 目标打包应用程序。创建或修改 metro.config.js 文件，如下所示，以启用对 React Native 中的包导出的支持。对于其他打包器，此步骤不是必需的。

metro.config.js
// Learn more https://docs.expo.dev/guides/monorepos
const { getDefaultConfig } = require('expo/metro-config');

// Find the project and workspace directories
const projectRoot = __dirname;

const config = getDefaultConfig(projectRoot);
// 1. Enable Metro support for symlinks and package exports
config.resolver.unstable_enablePackageExports = true;
// 2. Only for npm monorepos: force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
// config.resolver.disableHierarchicalLookup = true;

module.exports = config;

基于 TypeScript 的 Expo 项目也应将 moduleResolution 设置为 "bundler"。

tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "bundler",
  },
  ...
}

应用程序文件

您的应用程序需要包含一个包含 @stylex 指令的 CSS 文件。这充当占位符，在构建期间会被生成的 CSS 替换。

stylex.css
/* This directive is used by the react-strict-dom postcss plugin. */
/* It is automatically replaced with generated CSS during builds. */
@stylex;

接下来，在应用程序的入口文件中导入 CSS 文件。

index.js
// Required for CSS to work on Expo Web.
import './stylex.css';
// Required for Fast Refresh to work on Expo Web
import '@expo/metro-runtime';

import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

平台特定文件

Expo 默认情况下支持平台特定扩展。这使您可以创建组件、钩子等的平台特定实现。

其他框架在为每个平台构建时将需要打包器配置，以便根据文件扩展名解析文件。例如，Web 包应该打包 *.web.js 文件扩展名，但不打包 *.native.js 文件。这些特定的文件名后缀是 React Native 生态系统已经使用的推荐约定（请参阅上面的 Expo 文档。）

Expo 框架​

Babel 配置​

PostCSS 配置​

Metro 配置​

应用程序文件​