Compile JSX

2023年11月17日

柏拉文

越努力，越幸运

一、认识

---

二、准备

---

@babel/cli

@babel/core

@babel/plugin-transform-react-jsx

三、编译

---

3.1 package.json

pnpm init 生成 package.json, 配置Babel 编译运行命令为: babel App.jsx -o App.js --watch

{
  "name": "jsx",
  "type": "module",
  "scripts": {
    "jsx": "babel App.jsx -o App.js --watch"
  },
  "devDependencies": {
    "@babel/cli": "^7.23.0",
    "@babel/core": "^7.23.3",
    "@babel/plugin-transform-react-jsx": "^7.22.15"
  }
}

3.2 babel.config.js

通过 @babel/plugin-transform-react-jsx 插件进行编译解析 .jsx 文件, 其中 runtime 有两种模式:

• classic: 编译解析为 React.js 17.0 之前语法

• automatic: 编译解析为 React.js 17.0 之后语法

export default {
    presets: [
      [
        '@babel/env',
        {
          "modules": false 
        }
      ]
    ],
    plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]]
};

3.3 App.jsx

function App() {
  return <div className="page-app">Hello World</div>;
}

export default App;=