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应用中，我创建了一个类似于以下内容的应用组件：

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集成的实际文档并没有那么有用，但是我终于弄清楚了如何做到这一点。这对我有用：

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
的现有圣经配置中包含预设和插件属性
"babel": { "presets": [ "react-app" ], //already included "plugins": [ "transform-react-pug", "transform-react-jsx" ] },
如果您现在运行npm start，可能会遇到以下错误

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

上面提到的丢失的babel-plugin-transform-react-jsx plugin可以在此处找到
安装：npm install --save-dev babel-plugin-transform-react-jsx
在那之后，如果您运行该应用程序，则会出现以下错误

pug是未定义的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”：{ “ plugins”：[[react-pug“]， “扩展”：[“反应应用”，“插件：反应-pug /全部”] }
然后npm start

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

如何在reactjs中使用哈巴犬模板引擎

1 个答案: