配置 jsx transform

阅读时间约 2 分钟

F2 使用 JSX 语法来构建图表，所以需要在运行前对 JSX 语法进行编译， JSX 更多细节可参考 React 的官方文档 JSX 简介

Babel 和 TypeScript 都可以编译 JSX 语法，并且在编译时 JSX 语法时，会有 2 种编译模式，在实际项目中可根据自己实际情况选择和使用

JSX 2 种编译的差别可见：

Babel

在 Babel 中是使用 @babel/plugin-transform-react-jsx 这个插件来编译 JSX 的

安装

npm install --save-dev @babel/plugin-transform-react-jsx

配置 babel.config

classic

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "jsx",
        "pragmaFrag": "Fragment"
      }
    ]
  ]
}

automatic

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",
        "importSource": "@antv/f2"
      }
    ]
  ]
}

TypeScript

在 TypeScript 中也分别支持这 2 种编译模式

配置 tsconfig.json

classic

{
  "compilerOptions": {
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment"
  }
}

automatic

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@antv/f2"
  }
}