如何在React中使用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

- AL-zami

---

我没有做过这个，但每当像 pug\(...)` 这样做某些事情时，我都需要导入该包。试试这个：安装并导入 'pug'。 - George

https://www.npmjs.com/package/pug - George

我已经从'pug'导入了pug，但在启动时出现错误。 - AL-zami

官方文档应该有清晰的指南，告诉我们如何做这些事情。 - AL-zami

@AL-zami，我已经按照您的详细说明创建了一个 Github 仓库，演示了如何在 ejected create-react-app 中启用 Pug 模板。https://github.com/SydBal/cra-ejected-pug 谢谢您的指导！！！ - Dominic Balassone

Answer 1

我成功让它工作了。关于将 Pug 与 React 集成的实际文档并没有什么帮助。但最终我终于弄明白了如何做到这一点。以下是我的解决方案：

1. 使用 create-react-app puginreact1 创建一个 React 应用程序。

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

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

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

5. 你需要包含 babel plugin 以便 React 可以识别 Pug。因此运行 npm install --save-dev babel-plugin-transform-react-pug。

6. 在 package.json 中（而不是在根目录中创建 .babelrc 文件），包含以下 Babel 配置。如果你已经有一个，请在现有的 Babel 配置中包含 presets 和 plugins 属性。

"babel": { "presets": [ "react-app" ], //已包含 "plugins": [ "transform-react-pug", "transform-react-jsx" ] },

7. 如果你现在运行npm start，可能会遇到以下错误

无法找到模块"babel-plugin-transform-react-jsx

8. 上述缺失的babel-plugin-transform-react-jsx插件可以在这里找到

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

10. 之后，如果您运行应用程序，将会遇到以下错误

pug未定义 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": { "plugins": [ "react-pug"], "extends": [ "react-app", "plugin:react-pug/all" ] }

13. 最后运行npm start

现在，pug模板应该能够与react js一起工作了。至少对我来说是这样的。

- AL-zami