как использовать мопс шаблонизатор с реагировать - PullRequest
Новая
       12

как использовать мопс шаблонизатор с реагировать

3 голосов
/ 09 июня 2019

Я сделал следующее для интеграции pug с недавно созданным приложением activjs:

1. Создайте новое приложение реагировать, используя create-react-app

2. Затем я следовал инструкции от babel-plugin-transform-реакции-pug , чтобы установить плагин, как упомянуто в pugjsофициальный сайт.

Я использовал npm install --save-dev babel-plugin-transform-react-pug для установки вышеуказанного плагина.Затем я создал файл .babelrc в своем корневом каталоге и добавил следующее в .babelrc file 

{
  "plugins": [
    "transform-react-pug",
    "transform-react-jsx"
  ]
}

3. В своем приложении реакции я создалКомпонент приложения, подобный следующему: 

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 Ответ

1 голос
/ 10 июня 2019

Мне удалось заставить его работать. Фактическая документация по интеграции мопса и реагирования была не очень полезна. Но я наконец-то понял, как это сделать.Вот что у меня сработало:

  1. create-ract-app puginreact1

  2. после этого npm start (чтобы проверить, все ли в порядке)

  3. Вам необходимо удалить приложение create-реагировать.так что беги npm run eject.Есть и другие варианты, но я пошел с извлечением.

  4. Затем npm start снова, чтобы проверить, все ли в порядке.

  5. Вынужно включить плагин babel , чтобы реагировать распознавать мопса.Поэтому запустите npm install --save-dev babel-plugin-transform-react-pug

  6. In package.json (вместо создания файла .babelrc в корневом каталоге) включите следующую конфигурацию babel.Если у вас уже есть один, просто включите свойства пресетов и плагинов в существующую конфигурацию bable в package.json

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

  7. Если вы запустите npm start сейчас, вы можетеполучить следующую ошибку

Не удается найти модуль "babel-plugin-transform-реагировать-jsx

Вышеупомянутый отсутствующий плагин babel-plugin-transform-response-jsx можно найти здесь

Установить его: npm install --save-dev babel-plugin-transform-react-jsx

После этого, если вы запустите приложение, вы получите следующую ошибку

pug не определен no-undef

В качестве реагирования по умолчанию используется [eslint-plugin-react][3], выполните следующие действия из eslint-plugin-Reaction-pug Документация

frist, npm install eslint --save-dev

тогда npm install eslint-plugin-react-pug --save-dev

Затем в package.json изменить eslintConfig.(вы также можете использовать .eslintrc в корневом каталоге)

"eslintConfig": {"plugins": ["реагировать-мопс"], "extends": ["реагировать-приложение", "плагин: реагировать"-pug / all "]}

Тогда npm start

Теперь шаблонирование мопса должно работать с реагировать js.По крайней мере, у меня это сработало.

...