如何在React中使用Pug？附示例代码参考

嘿，我刚好在项目里折腾过React集成Pug模板引擎的事儿，结合你给出的示例代码，给你一步步拆解具体的实现方法：

1. 安装必要依赖 #

首先得装上Babel相关的转换插件，让React能识别并解析Pug语法：

# 使用npm安装
npm install --save-dev @babel/plugin-transform-react-pug @babel/plugin-transform-react-jsx

# 或者用yarn
yarn add --dev @babel/plugin-transform-react-pug @babel/plugin-transform-react-jsx

2. 配置Babel #

接下来需要告诉Babel如何处理Pug语法，在你的Babel配置文件（比如babel.config.js或者.babelrc）里添加这两个插件：

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-react-pug",
    "@babel/plugin-transform-react-jsx"
  ]
}

3. 编写Pug风格的React组件 #

你给出的示例是一个Pug宏，转换成React组件时需要适配React的语法规范，具体如下：

import React from 'react';

// 对应你给出的 btn 宏
const Button = ({ click, text }) => pug`
  // React事件采用驼峰命名，所以用onClick替代on-click
  // target属性值要写_blank才符合浏览器规范
  a.pug.btn(target='_blank' onClick=${click}) ${text}
`;

export default Button;

之后在其他组件里就能直接引用这个Button组件了：

import React from 'react';
import Button from './Button';

const App = () => {
  const handleButtonClick = () => {
    console.log('按钮被点击啦！');
  };

  return pug`
    div.app-container
      // 用Pug语法直接引用组件，插值采用${}格式
      Button(click=${handleButtonClick} text='点我打开新页面')
  `;
};

export default App;

4. Create React App项目的特殊处理 #

如果你的项目是用Create React App创建的，它默认隐藏了Babel配置，这时候需要借助react-app-rewired来修改配置：

安装额外依赖 #

npm install --save-dev react-app-rewired customize-cra

创建配置文件 #

在项目根目录新建config-overrides.js：

const { override, addBabelPlugins } = require('customize-cra');

module.exports = override(
  addBabelPlugins(
    '@babel/plugin-transform-react-pug',
    '@babel/plugin-transform-react-jsx'
  )
);

修改package.json的脚本命令 #

把原来的start/build/test命令替换为用react-app-rewired执行：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

这样你的Create React App项目也能完美支持Pug语法啦！

内容的提问来源于stack exchange，提问作者Andrey Stehno