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

Question

为了将 pug 与新创建的 reactjs 应用程序集成，我执行了以下操作：1. 使用创建一个新的 reactjs 应用程序 create-react-app2.然后我按照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 集成的实际文档并不是很有帮助。但我终于想出了如何做到这一点。这对我有用：

1. 使用以下命令创建反应应用程序： create-ract-app puginreact1

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

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

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

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

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

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

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

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

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

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

3. 之后，如果您运行该应用程序，您将收到以下错误

哈巴狗是未定义的 no-undef

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

首先， npm install eslint --save-dev

然后， npm install eslint-plugin-react-pug --save-dev

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

   "eslintConfig": { "plugins": [ "react-pug"], "extends": [ "react-app", "plugin:react-pug/all" ] }

2. 然后 npm start

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