什么是JSX Pragma

JSX和Pragma是什么？

JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

-from JSX Specification

翻译一下：JSX是对ECMAScript的类XML的语法扩展，没有预定义的语义。 不倾向于由引擎或浏览器实现，目标也不是将JSX纳入ECMAScript规范。它由各种预处理器（编译器），把标签转换为标准ECMAScript。

Pragma意思是编译指令。JSX Pragma表示把JSX表达式编译为JS的函数。在React中默认为React.createElement。所以我们写React的时候，即使没明确用到React，也要在头部import。

React编译时，需要把

render () {
  return (<button type='submit'>foo</button>);
}

转换成

React.createElement(
  'button',
  { type: 'submit' },
  'foo'
)

这个过程通常由配置的各种编译器（eslint、plugin-transform-react-jsx-compat、ts-loader等）配置好。而这些编译器其实都使用的是默认React转换器。

tsconfig.json（ts-loader配置文件）

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",    "baseUrl": "./src",
  },
  "compileOnSave": false
}

选项有3个

TypeScript - tsconfig

.babelrc

{
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

@babel/plugin-transform-react-jsx

.eslintrc

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true        }
    },
    "rules": {
        "semi": "error"
    }
}

使用自定义Pragma

这个转换器支持替换为自定义（通过json配置或者注释）。

注释比较简单

/** @jsx myPragma */

配置要区分不同编译器

TS

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "myPragma"  }
}

.babelrc

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

.eslintrc

需要使用插件ESLint-plugin-React

{
  "settings": {
    "react": {
      "createClass": "createReactClass",
      "pragma": "myPragma",      "version": "detect",
      "flowVersion": "0.53"
    },
  }
}

如何自己写一个JSX Pragma？