npm run serve что это
Когда использовать «npm start», а когда «ng serve»?
ng serve обслуживает проект Angular через сервер разработки
npm start запускает произвольную команду, указанную в свойстве «start» пакета объекта «scripts». Если свойство «start» не указано в объекте «scripts», будет запущен узел server.js.
Кажется, что ng serve запускает встроенный сервер, тогда как npm start запускает серверы Node.
Может ли кто-то пролить свет на это?
npm start будет запускать все, что вы определили для start команды scripts объекта в вашем package.json файле.
Так что, если это выглядит так:
Для проекта, который использует CLI, вы обычно будете использовать ng serve. В других случаях вы можете использовать npm start. Вот подробное объяснение:
нг служить
Итак, если вы создали проект с использованием CLI, вы, вероятно, захотите использовать ng serve
начало вечера
Это можно использовать в случае проекта, который не поддерживает Angular CLI (или его можно просто использовать для запуска «ng serve» для проекта, который поддерживает Angular CLI)
Как указано в других ответах, это команда npm, которая будет запускать команду (ы) npm из package.json с идентификатором «start», и она не должна просто запускать «ng serve». В package.json может быть что-то вроде следующего:
В этом случае запуск npm приведет к выполнению следующих команд:
Это одновременно запустит компилятор TypeScript (отслеживая изменения кода) и запустит Node lite-сервер (который использует BrowserSync).
Что такое CLI? Это утилита командной строки предоставляет доступ к множеству инструментов для сборки проекта.
Установка и системные требования Vue CLI 3
Системные требования
Для работы с Vue CLI v3 потребуется Node.js 8.9+. Но рекомендуется использовать версию платформы v8.11.0+.
Ее можно установить:
Перед началом установки Vue CLI нужно удалить все предыдущие версии CLI. Для этого выполните следующую команду:
Установка CLI Vue 3
Чтобы установить Vue CLI v3, запустите следующую команду:
После установки CLI Vue 3 вы сможете вывести список всех доступных команд, выполнив команду vue:
А также проверить установленную версию, выполнив:
Создание проекта Vue
С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:
example-vue-project – это название проекта. Вы можете изменить его.
Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:
Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:
Затем выполните следующую команду:
Сервер разработки поддерживает оперативную перезагрузку кода. Поэтому не нужно останавливать и запускать сервер каждый раз, когда вы вносите изменения в код проекта. При этом сохранится даже состояние приложения!
И когда вы закончите разработку своего проекта, то можете использовать следующую команду для создания сборки:
Что такое служба CLI Vue?
Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.
Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:
Анатомия проекта
Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.
Файлы и папки в проекте Vue:
Следующий скриншот отображает структуру проекта:
Плагины CLI Vue
Плагины CLI – это пакеты npm, которые реализуют дополнительные функции для Vue-проекта. Бинарный файл vue-cli-service автоматически распознает и загружает плагины, перечисленные в файле package.json.
Базовая конфигурация для проекта Vue CLI 3 – это webpack и Babel. Все остальные расширения могут быть добавлены через плагины.
Есть официальные плагины, созданные командой разработчиков Vue. А также плагины, написанные сторонними программистами. Имена официальных плагинов начинаются с @vue/cli-plugin-, а названия плагинов, разработанных сообществом, начинаются с vue-cli-plugin-.
Официальные плагины Vue CLI 3:
Как добавить плагин Vue
Плагины автоматически устанавливаются при создании проекта или инсталлируются разработчиком. Для этого используется команда vue add my-plugin.
Полезные плагины Vue
Я также создал несколько расширений:
А что насчёт webpack?
Большая часть конфигурации проекта Vue CLI абстрагируется в плагины и объединяется с базовой конфигурацией во время выполнения. Но также можно вручную настроить конфигурацию webpack для своего проекта:
Пользовательский интерфейс CLI Vue 3
Создайте новый проект на вкладке «Create». Выберите место для его хранения, затем нажмите кнопку «+ Create a new project here».
После этого вы попадёте в интерфейс, в котором нужно указать информацию о вашем проекте.
Введите данные и нажмите кнопку «Next». Затем вы попадете на вкладку «Presets», где нужно задать варианты настройки проекта:
Продолжим с установкой по умолчанию.
Далее нажмите на кнопку «Create Project». После этого вы попадете в новый интерфейс, который показывает прогресс создания проекта. Затем в панель управления проектом, где можно будет разместить виджеты, которые можно добавить с помощью кнопки «Customize».
Слева от панели настройки расположены ссылки на различные разделы:
Перейдите на страницу «Tasks».
Остановить проект можно с помощью кнопки « Stop task ».
Заключение
В этой статье мы рассмотрели новую версию Vue CLI, которая предоставляет целый ряд удобных функций: интерактивная разработка проектов, обширная коллекция официальных плагинов и полноценный графический интерфейс для создания и управления проектами на основе Vue.js.
Пожалуйста, оставьте ваши мнения по текущей теме статьи. Мы очень благодарим вас за ваши комментарии, подписки, отклики, дизлайки, лайки!
Дайте знать, что вы думаете по данной теме в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Введение в NPM скрипты
Что такое NPM скрипты и как их можно использовать для автоматизации задач.
Написание npm скриптов
Компиляция SCSS в CSS
Теперь, давай переместим рабочий скрипт в npm scripts package.json:
Теперь запустим в командной строке:
Видим тот же вывод, что и при запуске команды node-sass непосредственно в командной строке.
Большинство из инструментов командной строки, которые нам будут нужны, имеют множество опций, которые можно использовать, чтобы настроить его именно так, как удобно. Например, список опций node-sass. Вот другая настройка, показывающая, как передать несколько опций:
Автопрефиксы к CSS с помощью PostCSS
Когда компилируем Scss в CSS, мы можем автоматически добавлять префиксы вендоров, используя Autoprefixer и PostCSS. Установим несколько модулей одновременно, разделяя их пробелами:
Мы установим два модуля, потому что PostCSS, по умолчанию, ничего не делает. Он использует другие плагины, такие как Autoprefixer, для манипулирования предоставленным ему CSS.
Добавим новую задачу в объект scripts :
Опять же, есть много опций, которые мы можем использовать для настройки сборки: postcss-cli и autoprefixer.
При разработке кода важно придерживаться стандартного формата и стиля, чтобы свести ошибки к минимуму, и повысить эффективность работы разработчика. Stylelint помогает делать это автоматически для стилей, так что давай добавим linting стилей с помощью stylelint.
Теперь добавим задачу lint:scss в объект scripts package.json:
stylelint ищет любые файлы scss в папке src/scss/ и запускает их в соответствии с конфигурацией, созданной ранее. Также, есть много других настроек.
Также есть linting для JavaScript который поможет сделать то же самое при помощи: eslint.
Установим пакет, только на этот раз, используем ярлык:
Это тоже самое что:
Отвечаем на вопросы, которые он задает. Это создаст новый файл в корне проекта, с которым eslint будет проверять код. Например:
Теперь давай добавим задачу lint в объект scripts package.json:
Он ищет любые файлы JavaScript в папке src/js и запускает их в соответствии с конфигурацией, созданной ранее. Еще есть много других настроек.
Uglifying файлы JavaScript
Давай поработаем над объединением и минимизацией файлов JavaScript с помощью uglify-js. Для начала установим uglify-js :
Затем мы можем настроить задачу uglify в package.json:
Imagemin хорош, так как он сжимает большинство типов изображений, включая GIF, JPG, PNG и SVG. Мы можем передать ему папку с изображениями, например:
Популярность SVG возросла за последние несколько лет, и на это есть причины. Они четкие на всех устройствах, редактируются с помощью CSS и удобны для чтения с экрана. Однако, программное обеспечение для редактирования SVG обычно оставляет ненужный код. К счастью, svgo может помочь, удалив всё это.
Мы также можем автоматизировать процесс объединения и разбивки SVG-файлов в один SVG-файл (спрайт) (подробнее об этом здесь). Чтобы автоматизировать этот процесс, можно установить svg-sprite-generator.
После установки добавь задачу в объект scripts в package.json:
BrowserSync может делать несколько вещей: запускать локальный сервер, автоматически вставлять обновленные файлы в любой подключенный браузер и синхронизировать щелчки, и прокрутки между браузерами. Установим и добавим задачу:
Мы можем открыть несколько браузеров (даже на разных устройствах), и все они будут получать обновленные изменения файлов в режиме реального времени.
Со всеми вышеуказанными задачами мы сможем:
Объединение задач CSS
Давай добавим задачу, которая объединяет три задачи связанные с CSS (lint, обработка Sass и запуск Autoprefixer), что бы нам не нужно было запускать каждую из них по отдельности:
Объединение задач JavaScript
Объединение оставшихся задач
Мы можем сделать то же самое для задач с изображениями, а также для задачи, которая объединяет все задачи сборки в одну:
Наблюдая за изменениями
Ещё одна команда “watch”, завершающая процесс сборки скриптов npm
Установим ещё один пакет, parallelshell:
Поэтому, использование parallelshell позволяет запускать несколько команд watch одновременно.
Также, вместо parallelshell можно использовать npm-run-all. Он позволят запускать задачи последовательно или параллельно. В данном случае скрипт будет выглядеть так:
Другие полезные задачи
npm идёт с большим количеством встроенных задач. Давай напишем ещё одну задачу, используя один из этих встроенных скриптов.
Я создал проект npm-lesson со всеми задачами, которые можно использовать в качестве отправной точки. Если у тебя есть вопросы, пожалуйста, напиши мне. Буду рад помочь!
Русские Блоги
Реальная работа npm run serve / build
Vue CLI действительно очень удобен и удобен в использовании, но ему трудно понять после уровней инкапсуляции, что он сделал после выполнения этого npm run serve / build, и он даже не знает, как работал весь проект. Найдите время, чтобы взглянуть, настоящим запишите запись, чтобы углубить запись
Каталог статей
1. Изучите реальную работу npm run
1. Взгляните на npm run serve
Затем выполните команду run и увидите следующую печать
Фактически, эхо после теста выполняется, затем npm run vue-cli-service serve Что делает подача сзади? Взгляни еще раз
Фактически, последний как параметр
2. Имитация подачи
Если не верите, давайте еще раз проведем тест (подделка подачи)
Результат выполнения теста npm run выглядит следующим образом
Эй, это странно. Как обслуживала распечатала? Я не использовал эхо? Фактически я имитировал оригинальный сценарий,
2-1. Создайте тестовую папку
Сначала создайте каталог для создания тестового js в каталоге bin, как показано ниже 
JS для этого теста также очень просто распечатать полученные параметры, как показано ниже:
добавил сценарий оболочки Linux и Windows (my-npm-test и my-npm-test.cmd)
На самом деле внутри есть несколько целевых js-путей.
2-3. Добавьте my-npm-test
my-npm-test
2-4. Добавьте my-npm-test.cmd
my-npm-test.cmd Для окон
На данный момент я наконец кое-что знаю о npm run;
Фактически, официальная реализация npm help run также имеет соответствующие объяснения, такие как 
2-5. Принцип исполнения
При использовании сценария запуска npm для выполнения сценария создается оболочка, а затем указанный сценарий выполняется в оболочке.
2-6. По аналогии с npm run serve
2. Детальная компиляция проекта
Мы открываем этоvue-cli-service.js （ Код не может быть подробно объяснен, просто используйте блог big guy https://segmentfault.com/a/1190000017876208 ）
1. О vue-cli-service.js
2. О Service.js
Также существует js для PluginAPI для компиляции плагинов.
3. О PluginAPI
Все операции с этими файлами в сумме завершают построение нашего проекта vue, и вы можете увидеть эффект, введя адрес непосредственно в браузере. Кто-то несет за вас тяжесть.)
Интеллектуальная рекомендация
Что такое сущность архитектуры Super-Fusion (ниже): иерархическое хранение
Эта статья перепечатает от [Smartx Super-Integration] Wechat Public Account, нажмитеЗдесьВы можете прочитать оригинальный текст. В предыдущей статье «Какова сущность архитектуры Super-Fusion (ON.
13 приёмов работы с npm, которые помогают экономить время
Каждый день миллионы разработчиков, создавая свои JavaScript-приложения, обращаются к npm (или к Yarn). Выполнение команд наподобие npm init или npx create-react-app стало привычным способом начала работы над практически любым JavaScript-проектом. Это может быть сервер, клиент, или даже настольное приложение.
Многие программисты пользуются npm ежедневно. Это значит, что в долгосрочной перспективе изменить что-то в лучшую сторону может даже небольшая экономия времени. Этот материал рассчитан, преимущественно, на начинающих разработчиков и на разработчиков среднего уровня. Однако даже если вы — профессионал, автор материала надеется, что вы сможете найти здесь пару интересных вещей, с которыми вы раньше не сталкивались.
Если вы совершенно не знакомы с npm — знайте, что интересующая нас программа устанавливается вместе с Node.js. Если вы работаете в Windows, то, чтобы воспроизвести кое-что из того, о чём здесь пойдёт речь, рекомендуется установить Git Bash.
1. Краткие варианты записи основных команд
Начнём с основ. Потратив немного времени на изучение сокращённых вариантов самых распространённых команд npm, вы сэкономите себе немало времени в будущем.
▍Краткие варианты записи менее распространённых команд
Вот ещё несколько полезных сокращений, которые, однако, используются не так широко как те, что мы только что рассмотрели.
▍Сокращение для корневой директории
2. Установка значений по умолчанию для npm init
Постоянно запуская команду npm init для создания нового проекта, вы скорее всего обнаружите, что снова и снова вводите в ответ на вопросы системы одни и те же данные. Например — вполне вероятно то, что именно вы являетесь автором большинства создаваемых вами проектов. Для того чтобы сэкономить время на вводе одних и тех же данных, вы можете установить собственные значения по умолчанию для соответствующих полей:
Для того чтобы вернуться к настройкам по умолчанию — можете воспользоваться следующим скриптом. Его первая строка удаляет из файла конфигурационные данные, а вторая заполняет его значениями по умолчанию.
Вышеприведённый скрипт сбрасывает значения по умолчанию для пользователя. Следующий скрипт сбрасывает к исходному состоянию глобальные значения по умолчанию:
3. Кросс-платформенные скрипты
Любой код, выполняемый в командной строке, может столкнуться с проблемами совместимости. Особенно это касается несовместимости между системами, основанными на Windows и на Unix (сюда входят Mac и Linux). Это — не проблема, если над неким проектом работаете вы и только вы. Но во многих случаях кросс-платформенная совместимость скриптов весьма важна. Например, работа независимо от операционной системы — это огромный плюс для любого опенсорсного, учебного или демонстрационного проекта.
Я обнаружил, что пакет cross-env — это самый удобный инструмент для достижения кросс-платформенной совместимости скриптов. Но вам полезно будет взглянуть ещё и на следующие два популярных инструмента, которые могут помочь в решении этой задачи:
4. Параллельный запуск скриптов
5. Запуск скриптов, находящихся в различных директориях
Для начала, можно воспользоваться командой cd для организации автоматического перехода в нужную директорию. Выглядеть это может примерно так:
6. Откладывание запуска скрипта до тех пор, пока не будет доступен некий ресурс
При разработке фулстек-приложений часто возникает нужда в том, чтобы запускать и клиентскую, и серверную часть приложения. Пакет wait-on позволяет обеспечить синхронизацию выполнения неких процессов. В нашем случае нужно, чтобы перед запуском клиентской части приложения был бы доступным определённый порт.
7. Вывод списка доступных скриптов и работа с ними
Но есть и ещё более удобный способ вывода списка скриптов. При его использовании нужный скрипт можно сразу же выбрать из списка и запустить. Для того чтобы воспользоваться этим способом работы со скриптами, нам понадобится глобально установить модуль ntl (Npm Task List):
Использование команды ntl
Эта возможность может оказаться очень кстати в том случае, если вы не знаете точно о том, какие скрипты есть в проекте. Хороша она и в тех случаях, когда программист хочет заменить ввод длинной команды для запуска скрипта на ввод короткой команды и быстрое нажатие ещё нескольких клавиш на клавиатуре.
8. Запуск pre-скриптов и post-скриптов
Это не только позволяет сделать код чище, но и способствует запуску pre- и post-скриптов в изоляции.
9. Управление версией приложения
В зависимости от того, как часто вы обновляете своё приложение, вы можете сэкономить время, задав автоматическое увеличение номера версии каждый раз, когда развёртываете новую версию приложения. Например — так:
10. Редактирование package.json из командной строки
11. Автоматизация настройки и открытия репозитория
12. Создание собственного скрипта, управляющего работой команды npm init
Каждый вопрос строится по следующему шаблону:
13. Отправка первого коммита в GitHub-репозиторий с помощью npm init
Кроме того, создадим вспомогательную функцию, которая выводит результаты работы нашей функции в консоль:
И, наконец, давайте создадим соответствующий prompt-блок для обработки URL GitHub-репозитория. Если URL имеется в распоряжении скрипта — мы создадим файл README.md и отправим в репозиторий первый коммит.
Настраивая процесс инициализации новых проектов, вы можете пойти и дальше. Например — сделать так, чтобы при создании проекта создавался бы и новый репозиторий для него.
Итоги
Уважаемые читатели! Автоматизируете ли вы работу с npm?