如何在 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 Line 5: 'pug' is not defined no-undef

Answer 1

我能够做到 work.The 将 pug 与 React 集成的实际文档并非如此 helpful.But 我终于想出了如何做到这一点。这对我有用：

使用以下方法创建 React 应用程序：create-ract-app puginreact1
之后npm start（检查是否一切正常）
您需要弹出 create-react-app。所以运行 npm run eject。还有其他选择，但我选择了弹出。
然后再次 npm start 以检查是否一切正常。
您需要包含 babel plugin 以便反应识别哈巴狗。所以运行npm install --save-dev babel-plugin-transform-react-pug
在 package.json 中（而不是在根目录中创建 .babelrc 文件）包含以下 babel 配置。如果您已经有了一个，只需在 package.json
中的现有 bable 配置中包含预设和插件属性

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

如果你运行 npm start now 你可能会得到以下错误

can not find module "babel-plugin-transform-react-jsx

上面提到的遗漏babel-plugin-transform-react-jsx plugin可以在这里找到
安装它：npm install --save-dev babel-plugin-transform-react-jsx
之后，如果你运行应用程序，你会得到以下错误

pug is undefined 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”：{ “插件”：[“react-pug”]， “扩展”：[“react-app”，“插件：react-pug/all”] }
然后npm start

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

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

how to use pug templating engine with reactjs

javascript

jsx

reactjs

pug