Npm start как поменять браузер
Обновлено: 05.07.2024
Есть несколько способов чтобы обновить npm. Я предпочитаю:
Поиск пакетов в npm
Просмотр информации о пакете
Локальная установка пакетов
Установка пакета в наше приложение
test.js
Понимание разницы между глобальной и локальной установкой
По умолчанию npm будет устанавливать все пакеты в локальном каталоге, в которым вы сейчас работаете. Это правильно. Это может показаться немного запутанным, если вы раньше работали с предыдущими системами управления пакетами.
Например:
test.js
теперь запустим наш скрипт
мы получим эту ошибку:
Это вполне логично, мы установили http-server локально в "/mynewapp/", а не в "/anotherapp/".
Есть два решения в этой ситуации:
а) Установить ещё раз пакет, но локально в наше новое приложение
б) Установить пакет глобально
Глобальная установка пакетов
Если вы хотите чтобы пакет был доступен всем приложениям, его нужно установить глобально:
Удаление локально установленного пакета
Удаление глобально установленного пакета
Установка определённой версии пакета
Установка модуля с Github
Связи любых пакетов локально
Если у вас есть отдельный каталог содержащий пакет npm, то можно создать локальную связь для него. Это удобно в ситуациях, когда мы не хотим опубликовать наш пакет в хранилище npm.
Связи локальных пакетов для нескольких приложений
Как мы видели ранее npm устанавливает пакеты в локальный каталог по умолчанию. Так вот npm ссылка(связь) работает почти так же.
Отмена связи между пакетами приложения
(здесь мы просто отменяем наш «paste» для этого приложения)
Отмена связи пакета в системе
(здесь мы отменяем наш «copy» для этого пакета)
Создание нового пакета
(от себя хочу лишь заметить, что создание пакета не такая простая задача в одну команду, подробнее можно почитать в другой статье)
Добавление нового пользователя
Публикация пакета в репозиторий npm
Удаление пакета из репозитория npm
Управление правами доступа к пакетам в репозитории npm
Вы можете задать права доступа других пользователей к опубликованному пакету:
Запускает сервер реакции в браузере по умолчанию, для меня это Firefox. Мне нравится Firefox для просмотра, но я предпочитаю Chrome в веб-разработке для его инструментов разработчика. Есть ли способ заставить npm start запустить сервер с Chrome, не меняя браузер по умолчанию на chrome? Я использую Bash на Windows.
Правка . Я использовал «create-реагировать-приложение» для создания своего сервера, и это добавляет скрипт для файла "packages.json" для "запуска npm". Сценарий запускает сервер локального хоста с браузером по умолчанию. Как изменить скрипт, добавленный «create-реагировать-приложение», чтобы он запускался с другим браузером?
Это возможно с помощью переменной окружения BROWSER .
Вы также можете сделать это прямо в терминале: BROWSER=chrome npm start
По умолчанию приложение Create React откроет системный браузер по умолчанию, отдав предпочтение Chrome на macOS. Укажите браузер, чтобы переопределить это поведение, или задайте его, чтобы отключить его полностью. Если вам нужно настроить способ запуска браузера, вы можете указать вместо него скрипт узла. Любые аргументы, переданные в npm start, также будут переданы в этот скрипт, и URL, где будет показано ваше приложение, будет последним аргументом. Имя файла вашего скрипта должно иметь расширение .js.
Также обратите внимание, что имена браузеров различаются на разных платформах:
Название приложения зависит от платформы. Не пишите код жестко в многократно используемых модулях. Например, Chrome - это Google Chrome для MacOS, Google-Chrome для Linux и Chrome для Windows.
Добавьте скрипт в ваш файл package.json
Если вы являетесь пользователем Windows , перейдите в Сидя -> Приложения по умолчанию -> Веб-браузер , затем выберите нужный браузер. Если вы используете Linux затем перейдите в Системные настройки -> Детали . ( Примечание: в более старых версиях Ubuntu Сведения называется Информация о системе )
Мне не нравится многократно создавать новый файл .env или добавлять в начало npm start каждый раз с помощью дополнительной команды. Вы можете указать свой браузер вместо none в конфигурационном файле вашей оболочки. Введите в своем терминале следующие команды:
На этом этапе вы можете запустить npm start и быть счастливым.
Просто скачайте пакет оттуда и добавьте следующий код
Или вы можете просто запустить это set-default-browser chrome
В Windows cmd установите переменную env для нужного браузера:
Тогда просто запустите npm start как обычно
Чтобы открыть в Chrome, нам нужно установить его в качестве браузера по умолчанию.
Настройка -> Браузер по умолчанию -> Использовать по умолчанию ->
Could we disable auto-opening of browser window? Or at least in non-interactive mode?
The text was updated successfully, but these errors were encountered:
tbillington commented Oct 8, 2016
It seemed like at an earlier version of create-react-app, running npm start would reconnect to the existing tab/process that it had been interacting with. With the current version, opening a new tab every time, having to close the new and refresh the old is a bit of an anti-pattern.
glennreyes commented Oct 11, 2016
andreypopp commented Oct 18, 2016
I'd really like to see this configurable — in my case it opens Safari (the default on the system) but not Chrome (which I use for dev).
How about we make it configurable via BROWSER env var (similar to EDITOR , right)? BROWSER=none will make it not open any browser but BROWSER=<path>|<name> will make it open correct browser.
gaearon commented Oct 18, 2016
Any known workaround? I'm developing inside VBox Ubuntu on one monitor and have the app opened in Windows Chrome on another monitor. After a few hours of Ctrl+C , UP , Enter iterations the whole browser on VBox is flooded with new tabs :-)
gaearon commented Nov 2, 2016
No, there is currently no workaround except submitting a PR that @andreypopp suggested above.
sheerun commented Nov 10, 2016
glennreyes commented Nov 10, 2016
@gaearon There's a fork by @kitze that does very similar things like suggested from @andreypopp. Would you accept a PR for that?
kitze commented Nov 11, 2016
@glennreyes yup, but in my fork you can just set OPEN_BROWSER=false in .env, you cannot specify the browser.
GAumala commented Nov 12, 2016
+1 for choosing which browser to open. My default is firefox, but development is smoother on chrome.
gaearon commented Nov 24, 2016
sheerun commented Nov 24, 2016
Basically if won't show up if you do react-scripts start | cat because output is non-interactive. This is only heurestic for disabling auto-opening, and full solution would probably include a flag in package.json or environment variable.
vvo commented Nov 24, 2016
As for my usecase (and maybe many others?) what I would need is indeed a flag as in the linked fork in this topic.
fson commented Dec 3, 2016
I think the BROWSER environment variable suggested by @andreypopp above would still be the best solution for this because in addition to disabling this behavior, it also allows opening in a different browser than the system default. Does anyone want to submit a PR?
GAumala added a commit to GAumala/create-react-app that referenced this issue Dec 4, 2016GAumala commented Dec 4, 2016
I have prepared a PR with the suggested approach, the BROWSER environment variable. You can specify which browser to use, or just type any sort of nonsense like 'none' to disable the browser. And of course, if you don't use the environment variable it just opens your default browser as usual.
shrynx commented Dec 5, 2016
@GAumala
I have implemented the same feature in my fork react-super-scripts. In my experience it would be better if you handle the os specific browser names.
Google Chrome is "google chrome" on mac, "google-chrome" on linux and "chrome" on windows. Internet explorer is "iexplorer.exe" (simply "iexplorer" doesn't work, honestly who could have guessed that 😒 )
Free feel to check out my repo, would be nice if this would be part of CRA.
@sheerun
PS: give react-super-scripts a try.
GAumala commented Dec 5, 2016
@shrynx I'm afraid it is not that simple. In my Arch Linux laptop google chrome is google-chrome-stable .
shrynx commented Dec 5, 2016
@GAumala Ahh , really ? that's kind of the thing i am pointing at. OS specific names are different, so it would be much easier for the user if they had to just specify chrome, ie or firefox and rest be handled by CRA.
I'll try if it works with arch and try to fix it.
Also if CRA could cover most common use cases (windows, mac and ubuntu) it should be good enough, with documentation for special cases like arch et al.
/bin/vim` or whatever - CRA has no business trying to figure that out. edit: clarification
On Dec 4, 2016, at 7:47 PM, Shriyans ***@***.***> wrote: @GAumala Ahh , really ? that's kind of the thing i am pointing at. OS specific names are different, so it would be much easier for the user if they had to just specify chrome, ie or firefox and rest be handled by CRA. I'll try if it works with arch and try to fix it. Also if CRA could cover most common use cases (windows, mac and ubuntu) it should be good enough, with documentation for special cases like arch et al. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.It will take a few weeks until 0.9.0 is out with this, but I’ll close the issue since it’s not actionable now. Thanks to everyone for the discussion and suggestions.
To clarify, the name of the new env variable is BROWSER :)
gaearon commented Dec 12, 2016
GAumala commented Dec 12, 2016
Should the new environment variable be documented in the user guide?
gaearon commented Dec 12, 2016
GAumala commented Dec 12, 2016
alexdriaguine added a commit to alexdriaguine/create-react-app that referenced this issue Jan 23, 2017gaearon commented Feb 11, 2017
FYI support for BROWSER=none npm start (or BROWSER=Firefox npm start or whatever) landed in 0.9.0.
Tectract commented Apr 28, 2017
This should be displayed when you 'npm start' so people don't have to search for the option. imho opening the browser was a gimmick feature and should be disabled by default.
randycoulman added a commit to CodingZeal/create-react-app that referenced this issue May 8, 2017This doesn't quite cut it for me since I need to run Chromium with options. Seems like opn requires parameters to be defined in an array. Maybe use process.env.BROWSER.split(' ') instead?
EDIT: Or, if that causes problems for Chrome on Mac (why is there a space in the name in the first place??), another env var such as BROWSER_PARAMS could be introduced.
GAumala commented Oct 5, 2017
@jclc if you want to run Chromium with options you can pass a JS script with BROWSER . For example:
Then you start the dev server like this:
jclc commented Oct 5, 2017
I see, thank you
chiemekailo commented Oct 14, 2017
For those who want to build the "www" folder without auto-opening a browser, the simple answer is just
npm run build:www
I wonder why all the convoluted routes. (scripts et-all) 😩
Thank you for the fix. It will be better to disable this option by default, because it's frustrating.
Instruction for those who will read this thread from the end:
- create file .env in the same directory where your package.json lives
- insert this line BROWSER=none to the file and save it
- run nom start and web browser will not be opening anymore
ChuckkNorris commented Mar 27, 2018
Would really prefer for this feature to be disabled by default. but beggars can't be choosers.
In 99% of the situations, I already have the website running in an incognito window and opening a browser steals focus which is a bit obnoxious.
I'm on a Windows 10 machine and using the following command:
set BROWSER=NONE && npm start
The scripts work fine and everything compiles without a browser opening, but I get a windows error message saying "Windows cannot find 'NONE '. Make sure you typed the name correctly, and then try again."
This also happens when settings the environment variable through a .env file, and happens with both yarn and npm. Is this happening to anyone else?
EDIT: Apparently only when using the Command Prompt in a standalone window.
set BROWSER=none&&npm start should work fine.
Note, the lack of whitespace around && is intentional.
reed665 commented Jun 16, 2018
You can make use of cross-env as an option
mzedeler commented Nov 8, 2018
I'm just waiting for someone to publish a browser named none :-D
borrascador commented Dec 13, 2018
@Timer I'm curious about why the whitespace matters in this case? I'm also wondering if your solution will work cross-platform or if it's Windows-specific. Basically, I'm not sure if that's a good fix or if cross-env is the better choice.
Каждый день миллионы разработчиков, создавая свои JavaScript-приложения, обращаются к npm (или к Yarn). Выполнение команд наподобие npm init или npx create-react-app стало привычным способом начала работы над практически любым JavaScript-проектом. Это может быть сервер, клиент, или даже настольное приложение.
Но утилита npm способна не только на инициализацию проектов или на установку пакетов. Автор материала, перевод которого мы сегодня публикуем, хочет рассказать о 13 хитростях npm, которые позволят выжать из этой системы всё, что можно. Здесь будут рассмотрены приёмы разного масштаба — от использования сокращений команд до настройки поведения npm init .
Многие программисты пользуются npm ежедневно. Это значит, что в долгосрочной перспективе изменить что-то в лучшую сторону может даже небольшая экономия времени. Этот материал рассчитан, преимущественно, на начинающих разработчиков и на разработчиков среднего уровня. Однако даже если вы — профессионал, автор материала надеется, что вы сможете найти здесь пару интересных вещей, с которыми вы раньше не сталкивались.
Если вы совершенно не знакомы с npm — знайте, что интересующая нас программа устанавливается вместе с Node.js. Если вы работаете в Windows, то, чтобы воспроизвести кое-что из того, о чём здесь пойдёт речь, рекомендуется установить Git Bash.
1. Краткие варианты записи основных команд
Начнём с основ. Потратив немного времени на изучение сокращённых вариантов самых распространённых команд npm, вы сэкономите себе немало времени в будущем.
- Установка пакетов. Обычный вариант: npm install . Сокращённый вариант: npm i .
- Запуск тестов. Обычный вариант: npm test . Сокращённый вариант: npm t .
- Вызов справки. Обычный вариант: npm --help . Сокращённый вариант: npm -h .
- Флаг глобальной установки. Обычный вариант: --global . Сокращённый вариант: -g .
- Флаг установки пакета в качестве зависимости разработки. Обычный вариант: --save-dev . Сокращённый вариант: -D .
- Принятие установок npm init , применяемых по умолчанию. Обычный вариант: npm init --yes или npm init --force . Сокращённый вариант: npm init -y или npm init -f .
▍Краткие варианты записи менее распространённых команд
Вот ещё несколько полезных сокращений, которые, однако, используются не так широко как те, что мы только что рассмотрели.
- Сохранение пакета в виде опциональной зависимости. Обычный вариант: --save-optional . Сокращённый вариант: -O .
- Сохранение сведений о точной версии пакета. Обычный вариант: --save-exact . Сокращённый вариант: -E .
▍Сокращение для корневой директории
Обычно символ «точка» ( . ) используется для представления корневой директории приложения, или (в зависимости от контекста) — для представления точки входа в приложение. В npm это — то, что задано в качестве значения свойства main в файле package.json :
Это сокращение можно использовать, например, с командами наподобие npx create-react-app . Так, вместо того, чтобы запускать эту команду в виде npx create-react-app my-app (что приведёт к созданию новой папки my-app ), можно запустить эту команду так: npx create-react-app . (обратите внимание на точку, которая идёт после команды). Это позволит создать шаблонный проект React-приложения в той папке, в которой вы находитесь в момент запуска команды.
2. Установка значений по умолчанию для npm init
Постоянно запуская команду npm init для создания нового проекта, вы скорее всего обнаружите, что снова и снова вводите в ответ на вопросы системы одни и те же данные. Например — вполне вероятно то, что именно вы являетесь автором большинства создаваемых вами проектов. Для того чтобы сэкономить время на вводе одних и тех же данных, вы можете установить собственные значения по умолчанию для соответствующих полей:
Для того чтобы проверить правильность добавления подобных сведений в систему — введите команду npm config edit . Это приведёт к открытию конфигурационного файла в системном редакторе. Если вы хотите отредактировать глобальные параметры npm — воспользуйтесь командой npm config edit -g .
Для того чтобы вернуться к настройкам по умолчанию — можете воспользоваться следующим скриптом. Его первая строка удаляет из файла конфигурационные данные, а вторая заполняет его значениями по умолчанию.
Вышеприведённый скрипт сбрасывает значения по умолчанию для пользователя. Следующий скрипт сбрасывает к исходному состоянию глобальные значения по умолчанию:
3. Кросс-платформенные скрипты
Любой код, выполняемый в командной строке, может столкнуться с проблемами совместимости. Особенно это касается несовместимости между системами, основанными на Windows и на Unix (сюда входят Mac и Linux). Это — не проблема, если над неким проектом работаете вы и только вы. Но во многих случаях кросс-платформенная совместимость скриптов весьма важна. Например, работа независимо от операционной системы — это огромный плюс для любого опенсорсного, учебного или демонстрационного проекта.
К счастью, решить проблему совместимости скриптов не особенно сложно. В нашем распоряжении есть несколько вариантов. Однако тут мне хотелось бы рассказать об одном из них, о том, используя который я получил наилучшие результаты. Речь идёт о пакете cross-env. Его нужно установить как зависимость разработки с использованием команды npm i -D cross-env . Затем нужно поставить cross-env перед каждой переменной окружения. Например — это может выглядеть так:
Я обнаружил, что пакет cross-env — это самый удобный инструмент для достижения кросс-платформенной совместимости скриптов. Но вам полезно будет взглянуть ещё и на следующие два популярных инструмента, которые могут помочь в решении этой задачи:
- Пакет rimraf. Его, для запуска кросс-платформенных скриптов, можно установить глобально.
- Пакет ShellJS. Это — переносимая Node.js-реализация командной оболочки Unix.
4. Параллельный запуск скриптов
Для того чтобы организовать последовательное выполнение команд в командной оболочке Linux используется конструкция && . А как насчёт параллельного запуска скриптов? Для достижения этой цели можно подобрать соответствующий npm-пакет. Самыми популярными пакетами такого рода являются concurrently и npm-run-all. Здесь мы продемонстрируем применение пакета concurrently.
Для начала выбранный пакет нужно установить в качестве зависимости разработки: npm i -D concurrently . Затем в package.json можно воспользоваться конструкцией следующего вида:
5. Запуск скриптов, находящихся в различных директориях
Иногда приходится сталкиваться с приложениями, в которых имеется несколько файлов package.json , расположенных в различных директориях. Удобно было бы, например, запускать объявленные в них скрипты, находясь в корневой директории проекта. Это — куда лучше, чем необходимость путешествовать по разным папкам всякий раз, когда нужно запустить некий скрипт. Для того чтобы это сделать можно воспользоваться следующими двумя подходами.
Для начала, можно воспользоваться командой cd для организации автоматического перехода в нужную директорию. Выглядеть это может примерно так:
Но эту задачу можно решить и более интересным способом. Он заключается в использовании флага --prefix , с помощью которого можно указать путь:
Ниже показан пример применения этого решения из реального приложения. Тут нам нужно выполнить npm start для клиентской и серверной частей проекта. Их код, соответственно, находится в папках client и server .
6. Откладывание запуска скрипта до тех пор, пока не будет доступен некий ресурс
При разработке фулстек-приложений часто возникает нужда в том, чтобы запускать и клиентскую, и серверную часть приложения. Пакет wait-on позволяет обеспечить синхронизацию выполнения неких процессов. В нашем случае нужно, чтобы перед запуском клиентской части приложения был бы доступным определённый порт.
Кроме того, стандартным поведением React-проектов является автоматическое открытие окна браузера. В случае использования React с Electron в этом нет необходимости. Отключить это можно с помощью переменной окружения BROWSER=none , перед которой, ради кросс-платформенной совместимости решения, находится команда cross-env .
7. Вывод списка доступных скриптов и работа с ними
Для того чтобы вывести список скриптов, доступных в package.json , достаточно перейти в корневую директорию проекта и выполнить в терминале команду npm run .
Но есть и ещё более удобный способ вывода списка скриптов. При его использовании нужный скрипт можно сразу же выбрать из списка и запустить. Для того чтобы воспользоваться этим способом работы со скриптами, нам понадобится глобально установить модуль ntl (Npm Task List):
Затем в папке проекта нужно выполнить команду ntl . Она выведет список доступных скриптов и даст возможность выбрать скрипт, который нужно запустить. Вот как это выглядит.
Использование команды ntl
Эта возможность может оказаться очень кстати в том случае, если вы не знаете точно о том, какие скрипты есть в проекте. Хороша она и в тех случаях, когда программист хочет заменить ввод длинной команды для запуска скрипта на ввод короткой команды и быстрое нажатие ещё нескольких клавиш на клавиатуре.
8. Запуск pre-скриптов и post-скриптов
Возможно, вы знакомы со скриптами prebuild и postbuild , которые позволяют запускать некий код до и после запуска скрипта build . Такие вот pre- и post-скрипты можно определить и для любого другого скрипта. Включая те, описания которых добавляет в p ackage.json сам программист.
Это не только позволяет сделать код чище, но и способствует запуску pre- и post-скриптов в изоляции.
9. Управление версией приложения
Вместо того, чтобы вручную менять версию приложения, программист может воспользоваться специальными командами npm . Для того чтобы увеличить соответствующую часть номера версии приложения, можно воспользоваться командой npm version , за которой идёт major , minor или patch :
В зависимости от того, как часто вы обновляете своё приложение, вы можете сэкономить время, задав автоматическое увеличение номера версии каждый раз, когда развёртываете новую версию приложения. Например — так:
10. Редактирование package.json из командной строки
Файл package.json — это обычный json-файл, поэтому его можно редактировать прямо из командной строки с использованием утилиты json. Это открывает новые возможности в тех ситуациях, когда нужно изменить package.json , позволяя создавать собственные сокращённые варианты команд. Установим пакет json глобально:
Затем утилиту json можно использовать для быстрого редактирования файла с помощью ключа -I . Например, для того чтобы добавить в файл новый скрипт foo со значением bar , можно воспользоваться такой командой:
В следующем разделе вы увидите более практичный пример использования утилиты json .
11. Автоматизация настройки и открытия репозитория
Если в вашем файле package.json есть запись "repository" — это значит, что вы можете открыть страницу репозитория в браузере, используемом в системе по умолчанию. Для этого применяется команда npm repo .
Если ваш проект уже подключён к удалённому репозиторию и у вас установлена утилита командной строки git , это значит, что выяснить адрес своего свой репозитория вы можете с помощью такой команды:
Но и это ещё не всё. Если вы, в соответствии с предыдущим советом, установили у себя утилиту json , то вы можете воспользоваться следующим скриптом для автоматического добавления корректных сведений о репозитории в package.json :
12. Создание собственного скрипта, управляющего работой команды npm init
Теперь поговорим о решении более масштабной задачи. А именно, мы собираемся разработать собственный скрипт, управляющий работой команды npm init , который принимает URL GitHub-репозитория и автоматически отправляет в него первый коммит. Здесь мы поговорим о том, как создавать подобные скрипты. А в следующем разделе, который будет представлять наш последний совет, мы поговорим о работе с git .
Настроить поведение команды npm init можно с помощью файла .npm-init.js . Создадим такой файл в домашней директории текущего пользователя (в Windows это обычно C:/Users/<username> , а в Mac — /Users/<username> ). После этого выполним следующую команду, указывающую npm на то, где именно находится этот файл:
Прежде чем заниматься интеграцией c git , давайте посмотрим на простой пример файла .npm-init.js , в котором воспроизведены вопросы, которые система задаёт пользователю при использовании команды npm init без дополнительных настроек:
Каждый вопрос строится по следующему шаблону:
Для того чтобы указать некое значение и не задавать при этом вопрос пользователю, достаточно просто убрать метод prompt .
Если вы хотите вернуться к стандартным настройкам npm init — просто удалите файл .npm-init.js .
13. Отправка первого коммита в GitHub-репозиторий с помощью npm init
Для того чтобы выполнять команды git в файле .npm-init.js нам понадобится найти способ работы с командной строкой. Для этого можно воспользоваться модулем child_process . Мы подключаем его в верхней части файла, и, так как нам нужна только функция execSync , импортируем лишь её, воспользовавшись деструктурированием:
Кроме того, создадим вспомогательную функцию, которая выводит результаты работы нашей функции в консоль:
И, наконец, давайте создадим соответствующий prompt-блок для обработки URL GitHub-репозитория. Если URL имеется в распоряжении скрипта — мы создадим файл README.md и отправим в репозиторий первый коммит.
Итак, одним из элементов объекта module.exports файла .npm-init.js должен быть следующий код:
Вот как после этого добавления должен выглядеть полный код файла .npm-init.js :
Вот как выглядит файл package.json , который система создаёт с использованием этого .npm-init.js :
Настраивая процесс инициализации новых проектов, вы можете пойти и дальше. Например — сделать так, чтобы при создании проекта создавался бы и новый репозиторий для него.
Читайте также: