如何在 reactjs 中使用 pug 模板引擎

Question

为了将 pug 与新创建的 reactjs 应用程序集成，我执行了以下操作：

1. 使用创建一个新的 reactjs 应用程序 create-react-app

2.然后我按照babel-plugin-transform-react- pug 的说明安装了 pugjs 官方网站中提到的插件。

我曾经npm install --save-dev babel-plugin-transform-react-pug安装过上面的插件。然后我.babelrc在我的根目录中创建了一个文件并在.babelrc文件中添加以下内容

{

  "plugins": [

    "transform-react-pug",

    "transform-react-jsx"

  ]

}

3. 在我的 React 应用程序中，我创建了一个 App 组件，如下所示：

import React from "react"

class App extends React.Component {

  render() {

    return pug`

      div

        h1 My Component

        p This is my component using pug.

    `;

  }

}

export default App;

但是每当我运行应用程序 usng 时npm start，我都会收到错误消息

./src/App.js 第 5 行：'pug' 未定义 no-undef

Answer 1

我能够让它工作。将 pug 与 react 集成的实际文档并不是很有帮助。但我终于想出了如何做到这一点。这对我有用：使用以下命令创建反应应用程序： create-ract-app puginreact1之后npm start（检查是否一切正常）您需要弹出 create-react-app。所以跑npm run eject。还有其他选择，但我选择了弹出。然后npm start再次检查是否一切正常。您需要包含babel 插件，以便反应识别哈巴狗。所以运行npm install --save-dev babel-plugin-transform-react-pug在package.json（而不是.babelrc在根目录中创建文件）中包含以下 babel 配置。如果您已经有一个，只需在现有的 bable 配置中包含预设和插件属性package.json"babel": {  "presets": [ "react-app" ], //already included "plugins": [ "transform-react-pug", "transform-react-jsx" ]  },如果你现在运行 npm start 你可能会得到以下错误找不到模块“babel-plugin-transform-react-jsx上面提到的缺少babel-plugin-transform-react-jsx 插件可以在这里找到安装它： npm install --save-dev babel-plugin-transform-react-jsx之后，如果您运行该应用程序，您将收到以下错误哈巴狗是未定义的 no-undef作为默认使用的 reactjs [eslint-plugin-react][3]，请从 eslint-plugin-react-pug文档中执行以下操作首先， npm install eslint --save-dev然后， npm install eslint-plugin-react-pug --save-dev然后在package.json修改eslintConfig. （您也可以.eslintrc在根目录中使用）"eslintConfig": { "plugins": [ "react-pug"], "extends": [ "react-app", "plugin:react-pug/all" ] }然后 npm start现在 pug 模板应该与 react js 一起使用。至少它对我有用。