上一篇我们介绍了Mitosis的工作原理：Mitosis是如何做到通过一次性开发，可以通用多种主流前端框架的？，这篇介绍如何配置项目。
文件结构
Mitosis的项目结构如下图，可以选用typescript。
src/包含Mitosis的源代码。output/包含项目导出的预目标代码，是可读的框架代码，便于debug，因为真正的JS输出是压缩过的代码。mitosis.config.js包含通用和预目标的设置，在mitosis build时会用到。overrides/包含预目标代码，而文件结构与src/保持一致，里面的文件会完全置换出其他地方任何有着相同文件名的文件。比如：我们在这个文件夹里定义了：overrides/react-native/src/functions/is-react-native.ts，这份代码将完全覆盖src/functions/is-react-native.ts和output/react-native/src/functions/is-react-native.ts。
Mitosis配置
在项目根文件夹中，也就是你将跑命令的文件夹下，需要这样的文件mitosis.config.js，Mitosis会读这个配置文件，你也可以通过命令--option=<file>自定义配置文件。
配置文件模板如下：
type MitosisConfig = {
/**
* List of targets to compile to.
*/
targets: Target[];
/**
* The output directory. Defaults to `output`.
*/
dest?: string;
/**
* globs of files to transpile. Defaults to `src/*`.
*/
files?: string | string[];
/**
* Optional list of globs to exclude from transpilation.
*/
exclude?: string[];
/**
* The directory where overrides are stored. The structure of the override directory must match that of the source code,
* with each target having its own sub-directory: `${overridesDir}/${target}/*`
* Defaults to `overrides`.
*/
overridesDir?: string;
/**
* Dictionary of per-target configuration. For each target, the available options can be inspected by going to
* `packages/core/src/targets.ts` and looking at the first argument of the desired generator.
*
* Example:
*
* ```js
* options: {
* vue: {
* prettier: false,
* namePrefix: (path) => path + '-my-vue-code',
* },
* react: {
* stateType: 'builder';
* stylesType: 'styled-jsx'
* }
* }
* ```
*/
options: Partial<GeneratorOptions>;
/**
* Configure a custom parser function which takes a string and returns MitosisJSON
* Defaults to the JSXParser of this project (src/parsers/jsx)
*/
parser?: (code: string, path?: string) => MitosisComponent | Promise<MitosisComponent>;
/**
* Configure a custom function that provides the output path for each target.
* If you provide this function, you must provide a value for every target yourself.
*/
getTargetPath: ({ target }: { target: Target }) => string;
}
其中Target的类型可以是以下任何一个或多个：
type targets =
| 'alpine'
| 'angular'
| 'customElement'
| 'html'
| 'mitosis'
| 'liquid'
| 'react'
| 'reactNative'
| 'solid'
| 'svelte'
| 'swift'
| 'template'
| 'webcomponent'
| 'vue'
| 'vue2'
| 'vue3'
| 'stencil'
| 'qwik'
| 'marko'
| 'preact'
| 'lit'
| 'rsc';
注意你也可以一个一个设置目标生成器，提供有针对性的插件。
下面是一个例子供参考：
const seedrandom = require('seedrandom');
const rng = seedrandom('vue-sdk-seed');
const getSeededId = () => {
const rngVal = rng();
return Number(String(rngVal).split('.')[1]).toString(36);
};
module.exports = {
files: 'src/**',
targets: ['reactNative', 'vue'],
options: {
vue: {
cssNamespace: getSeededId,
},
},
};
Package配置
下面安装以下依赖：
{
"name": "@builder.io/basic-example",
"private": true,
"scripts": {
"mitosis": "mitosis build",
"build": "yarn run mitosis",
"start": "watch 'yarn run mitosis' ./src ./overrides"
},
"dependencies": {
"@builder.io/mitosis": "workspace:*",
"@builder.io/mitosis-cli": "workspace:*",
"node-fetch": "^2.6.1",
"seedrandom": "^3.0.5"
},
"devDependencies": {
"@builder.io/eslint-plugin-mitosis": "workspace:*",
"@types/node-fetch": "^2.5.12",
"@typescript-eslint/eslint-plugin": "^6.13.1",
"@typescript-eslint/parser": "^6.13.1",
"eslint": "^8.17.0",
"prettier": "^2.5.0",
"typescript": "^5.3.2",
"watch": "^1.0.2"
}
}
TypeScript配置
TypeScript包含了一个全面的JSX编译机制，把下面配置加到tsconfig.json中可以将JSX编译成Mitosis兼容的JavaScript。
{
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "@builder.io/mitosis",
// other config here
}
}
ESLint配置
Mitosis官方强烈推荐安装他们的ESLint插件。 首先按下面的命令安装插件：
yarn add -D @builder.io/eslint-plugin-mitosis
然后将插件加到.eslintrc.js中：
module.exports = {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
plugins: ['@builder.io/mitosis'],
extends: [
// Use this approach for our recommended rules configuration
'plugin:@builder.io/mitosis/recommended',
],
rules: {
// Use this to configure rules individually
'@builder.io/mitosis/css-no-vars': 'error',
},
};
这样就好了，接下来我们可以跑命令试试看了。下一步：Mitosis开发必会的CLI命令。
