在寫 WTF is JSX 的時候比較了一下下面兩個 Plugin
plugin-syntax-jsx
vs plugin-transform-react-jsx
?
plugin-syntax-jsx
只提供讓 babel 認得 jsx syntax 不提供轉換plugin-transform-react-jsx
包含 syntax 的轉換
意思是如果現在有段 code
// index.js
const element = <div>Hello World</div>;
plugin-syntax-jsx
,plugin-syntax-jsx
都不使用
babel index.js
# { SyntaxError: ... }
- 使用
plugin-syntax-jsx
babel --plugins @babel/plugin-syntax-jsx index.js
# const a = <div>Hello World!</div>;
- 使用
plugin-transform-react-jsx
babel --plugins @babel/plugin-transform-react-jsx index.js
# const a = React.createElement("div", null, "Hello World!")