javascript - 如何在 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

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

1. 使用以下方法创建 React 应用:create-ract-app puginreact1

2. 之后 npm start(检查是否一切正常)

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

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

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

6. 在 package.json 中(而不是在根目录中创建 .babelrc 文件)包含以下 babel 配置。如果您已经有了一个，只需在 package.json

   中的现有 bable 配置中包含预设和插件属性

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

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

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

1. 上述遗漏babel-plugin-transform-react-jsx plugin可以在这里找到

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

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

pug is undefined 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 )

   “eslint配置”:{ “插件”:[“ react 哈巴狗”]， “扩展”:[“react-app”，“plugin:react-pug/all”]

2. 然后npm start

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