首頁猿問如何在 reactjs 中使用...

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

JavaScript

慕斯709654 2021-06-21 17:04:22

為了將 pug 與新創(chuàng)建的 reactjs 應用程序集成，我執(zhí)行了以下操作：1. 使用創(chuàng)建一個新的 reactjs 應用程序 create-react-app2.然后我按照babel-plugin-transform-react- pug 的說明安裝了 pugjs 官方網(wǎng)站中提到的插件。我曾經(jīng)npm install --save-dev babel-plugin-transform-react-pug安裝過上面的插件。然后我.babelrc在我的根目錄中創(chuàng)建了一個文件并在.babelrc文件中添加以下內(nèi)容{ "plugins": [ "transform-react-pug", "transform-react-jsx" ]}3. 在我的 React 應用程序中，我創(chuàng)建了一個 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

查看完整描述

1 回答

寶慕林4294392

TA貢獻2021條經(jīng)驗獲得超8個贊

我能夠讓它工作。將 pug 與 react 集成的實際文檔并不是很有幫助。但我終于想出了如何做到這一點。這對我有用：

使用以下命令創(chuàng)建反應應用程序： create-ract-app puginreact1
之后npm start（檢查是否一切正常）
您需要彈出 create-react-app。所以跑npm run eject。還有其他選擇，但我選擇了彈出。
然后npm start再次檢查是否一切正常。
您需要包含babel 插件，以便反應識別哈巴狗。所以運行npm install --save-dev babel-plugin-transform-react-pug
在package.json（而不是.babelrc在根目錄中創(chuàng)建文件）中包含以下 babel 配置。如果您已經(jīng)有一個，只需在現(xiàn)有的 bable 配置中包含預設和插件屬性package.json

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

如果你現(xiàn)在運行 npm start 你可能會得到以下錯誤

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

上面提到的缺少babel-plugin-transform-react-jsx 插件可以在這里找到
安裝它： npm install --save-dev babel-plugin-transform-react-jsx
之后，如果您運行該應用程序，您將收到以下錯誤

哈巴狗是未定義的 no-undef

作為默認使用的 reactjs [eslint-plugin-react][3]，請從 eslint-plugin-react-pug文檔中執(zhí)行以下操作

首先， npm install eslint --save-dev

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

然后在package.json修改eslintConfig. （您也可以.eslintrc在根目錄中使用）
"eslintConfig": { "plugins": [ "react-pug"], "extends": [ "react-app", "plugin:react-pug/all" ] }
然后 npm start

現(xiàn)在 pug 模板應該與 react js 一起使用。至少它對我有用。

反對回復 2021-06-24