Mitosis 配置

在运行 mitosis 的项目根目录中，您可以添加一个 mitosis.config.js 文件，Mitosis 将读取该文件。您还可以通过选项 —config= 指定配置文件。

mitosis.config.js 文件的结构如下：

  1. type MitosisConfig = {
  2.   /**
  3.    * 编译到的目标列表。
  4.    */
  5.   targets: Target[];
  6.   /**
  7.    * 输出目录。默认为 `output`。
  8.    */
  9.   dest?: string;
  10.   /**
  11.    * 要转译的文件的glob。默认为 `src/*`。
  12.    */
  13.   files?: string | string[];
  15.   /**
  16.    * 要从转译中排除的可选文件的glob列表。
  17.    */
  18.   exclude?: string[];
  19.   /**
  20.    * 存储覆盖内容的目录。覆盖目录的结构必须与源代码的结构匹配，
  21.    * 每个目标都有自己的子目录：`${overridesDir}/${target}/*`
  22.    * 默认为 `overrides`。
  23.    */
  24.   overridesDir?: string;
  25.   /**
  26.    * 每个目标的部分配置字典。对于每个目标，可以查看
  27.    * `packages/core/src/targets.ts`，查看所需生成器的第一个参数。
  28.    *
  29.    * 示例:
  30.    *
  31.    * ```js
  32.    * options: {
  33.    *   vue: {
  34.    *     prettier: false,
  35.    *     namePrefix: (path) => path + '-my-vue-code',
  36.    *   },
  37.    *   react: {
  38.    *     stateType: 'builder';
  39.    *     stylesType: 'styled-jsx'
  40.    *   }
  41.    * }
  42.    *

/ options: Partial; /*

  • 配置一个自定义解析器函数，该函数接受字符串并返回MitosisJSON。

  • 默认使用该项目的JSXParser (src/parsers/jsx)。 */ parser?: (code: string, path?: string) => MitosisComponent | Promise;

    /**

  • 配置一个自定义函数，该函数为每个目标提供输出路径。
  • 如果提供了此函数，则必须自己为每个目标提供值。 */ getTargetPath: ({ target }: { target: Target }) => string; } ```

Targets类型可以是以下字符串之一或其数组：

  1. type targets =
  2.   | 'alpine'
  3.   | 'angular'
  4.   | 'customElement'
  5.   | 'html'
  6.   | 'mitosis'
  7.   | 'liquid'
  8.   | 'react'
  9.   | 'reactNative'
  10.   | 'solid'
  11.   | 'svelte'
  12.   | 'swift'
  13.   | 'template'
  14.   | 'webcomponent'
  15.   | 'vue'
  16.   | 'vue2'
  17.   | 'vue3'
  18.   | 'stencil'
  19.   | 'qwik'
  20.   | 'marko'
  21.   | 'preact'
  22.   | 'lit'
  23.   | 'rsc';

请注意，您可以单独为每个目标生成器配置，根据需要提供插件。

TypeScript配置

TypeScript包含一个全功能的JSX编译器。将以下配置添加到您的tsconfig.json文件，以将JSX转译为与Mitosis兼容的JavaScript：

  1. {
  2.   "compilerOptions": {
  3.     "jsx": "preserve",
  4.     "jsxImportSource": "@builder.io/mitosis",
  5.     // 其他配置
  6.   }
  7. }

有关TS配置的示例，请查看我们基本示例的tsconfig.json。