什么是JSX Pragma

December 7, 2019 ... ☕️ 2 min read

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个

tsconfig 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

jsx-factory

{
  "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?

#react#jsx#what-is