Babel Plugin Syntax vs Transform ?

May 19, 2018, 1 min read

在寫 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>;
  1. plugin-syntax-jsxplugin-syntax-jsx 都不使用
babel index.js

# { SyntaxError: ... }
  1. 使用 plugin-syntax-jsx
babel --plugins @babel/plugin-syntax-jsx index.js

# const a = <div>Hello World!</div>;
  1. 使用 plugin-transform-react-jsx
babel --plugins @babel/plugin-transform-react-jsx index.js

# const a = React.createElement("div", null, "Hello World!")

Category react

Tags babel, react, js

Comments