Комментарии 21
Вопрос к знатокам npm:
существует ли возможность, работая в среде create-react-app, обращаться к другому серверу ( не localhost:3000) за реальными данными?
Если нет, еще вопрос:
можно ли в среде create-react-app создать не минимизированную версию?
Что-то типа «npm run build», но чтобы потом можно было отлаживать.
существует ли возможность, работая в среде create-react-app, обращаться к другому серверу ( не localhost:3000) за реальными данными?
Конечно. Посмотрите на мой фан-проект. Сервер живет по адресу localhost:9000 и разрешает обращаться к себе всем (Access-Control-Allow-Origin)
https://webpack.js.org/configuration/dev-server/#devserver-proxy
Я использую axios для всех RESTful-запросов, определил в конфиге baseURL: https://github.com/mzabriskie/axios#request-config
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, PUT, POST, DELETE, HEAD, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization";
add_header Access-Control-Allow-Credentials "true";
add_header Content-Length 0;
add_header Content-Type text/plain;
return 200;
}
Хоть это — из пушки по воробьям…
В Readme есть официальный способ.
Добавляете в package.json секцию proxy, и все запросы, не возвращающие файлы, будут проксироваться на указанный адрес.
Позволяет обойтись без дополнительной настройки cors, который может быть запрещен требованиями безопасности.
можно ли в среде create-react-app создать не минимизированную версию? Что-то типа «npm run build», но чтобы потом можно было отлаживать.
А что не так с npm start?
Visual Studio 2017 прямо из коробки умеет аналогично JetBrains-у, только ставить вообще ничего не надо (2015 так-то тоже умеет, но нигде кроме IE оно у меня не заработало), единственное, консолька в самом браузере сильно удобнее чем в студии.
Отладка внутри WebStorm выигрывает против отладки в браузере.
Отладка JS во всех продуктах JetBrains ужасно тормозит, точнее не сама отладка а обновление состояния переменных из шага в шаг. Да и что там выигрывает, не понятно, в браузере функционал даже побогаче будет.
Про всех не скажу, но WebStorm версии 2017.1 работает нормально. При том, что у меня не самая мощная машина на свете.
Расстраивают тормоза Resolving Reference после перехода на Flow. Инспекцию по ESLint внутри WebStorm отключил — тоже тормозит, и в CRA прекрасно настроен вывод сообщений ESLint.
Основной плюс, в моём представлении, что не нужно переключать контекст внимания. Ловишь ошибки там же, где их исправляешь.
Спасибо за статью.
Возник такой вопрос: как интегрировать тесты в create-react-app на jest с webstorm без команды eject?
Есть небольшое расширение для Chrome React Dev Tools — дополнительная вкладка Dev Tools Chrome. С ним отладка компонентов реакта в браузере становится сильно удобнее.
А если вы решили использовать SPOT в виде Redux, то еще могу посоветовать вот это мега-расширение
Расшифруйте аббревиатуру SPOT, пожалуйста.
Впервые я эту аббревиатуру услышал от коллег-немцев, мне ее расшифровали как Single Point of Truth. А в англоговорящей среде это SSOT — Single source of truth. По-моему, не так красиво звучит, как SPOT, ну как уж где привыкли.
Любопытно, что статья называется «Способы отладки JS на клиенте», а второй абзац уже начинается с «мы видим исходный JSX», вторая часть статьи называется «Отладка внутри IDE WebStorm».
Так что из первой части получаем, что отлаживаем не совсем JS, а из второй, что не совсем на клиенте.
Как настроить отладку CRA внутри VSCode. Не думал, что когда-нибудь скажу такое, но этот продукт от Microsoft прекрасен.
Способы отладки JS на клиенте