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

Question

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

1. 使用 create-react-app

创建一个全新的 reactjs 应用

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;

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

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

Answer 1

我能够让它工作。将 pug 与 react 集成的实际文档没有太大帮助。但我终于想出了如何做到这一点。这对我有用：

1. 使用 create-ract-app puginreact1 创建一个反应应用程序

2. 之后npm start（检查是否一切正常）

3. 您需要弹出 create-react-app。所以运行npm run eject。还有其他选择，但我选择了弹出。

4. 然后再次npm start 以检查是否一切正常。

5. 您需要包含babel plugin 以便反应识别哈巴狗。所以运行npm install --save-dev babel-plugin-transform-react-pug

6. 在package.json（而不是在根目录下创建.babelrc文件）包含以下babel配置。如果您已经有一个，只需在 package.json 的现有 bable 配置中包含预设和插件属性即可

"babel": { "presets": [ "react-app" ], //already included "plugins": [ "transform-react-pug", "transform-react-jsx" ] },

1. 如果现在运行 npm start 可能会出现以下错误

找不到模块“babel-plugin-transform-react-jsx”

8. 上面提到的缺少的babel-plugin-transform-react-jsx plugin可以在这里找到

9. 安装它：npm install --save-dev babel-plugin-transform-react-jsx

10. 之后，如果你运行应用程序，你会得到以下错误

pug 是 undefined no-undef

11. 由于 reactjs 默认使用 [eslint-plugin-react][3]，请从 eslint-plugin-react-pug 文档中执行以下操作

第一，npm install eslint --save-dev

那么，npm install eslint-plugin-react-pug --save-dev

12. 然后在package.json 中修改eslintConfig。 （你也可以在根目录使用.eslintrc）

    "eslintConfig": { “插件”：[“反应哈巴狗”]， “扩展”：[“react-app”，“插件：react-pug/all”] }

13. 然后npm start

现在 pug 模板应该可以与 react js 一起使用。至少它对我有用。