[МУЗЫКА]
Теперь, когда у вас есть Node.js на вашем компьютере,
вы, очевидно, хотите немедленно начать использовать его.
Итак, в этом упражнении мы начнем использовать Node.
Мы создадим упакованный или смежный файл для
нашей тестовой папки Git, с которой мы работали до сих пор.
Затем мы установим модуль узла, называемый как облегченный сервер, который
будет обслуживать содержимое нашей тестовой папки get.
И тогда мы можем просматривать этот файл index.html и
другие файлы в браузере.
И мы также увидим, как облегченный сервер позволит нам
автоматически видеть обновления в нашем окне браузера, как мы вносим изменения в наш
файл index.html, или любые другие файлы в нашей папке get test.
Lite сервер это то, что мы собираемся широко использовать в этом и
будущих курсах, чтобы иметь возможность видеть изменения в режиме реального времени
в окне браузера, когда вы редактируете файлы вашего проекта.
Как я уже упоминал, мы хотим настроить файл package.json.
Итак, что именно это файл package.json, который мы собираемся настроить?
Итак, здесь у меня есть некоторая информация с
сайта npmjs.org,
который указывает, что именно представляет собой роль файла package.json.
Таким образом, файл package.json служит документацией о всех
других пакетах, от которых зависит ваш проект.
Так, например, при настройке облегченного сервера вашего проекта,
который будет записан в файл package.json.
И чтобы впоследствии вы также могли использовать этот пакет в будущем.
Кроме того, он позволяет указать, какая конкретная версия пакета
зависит от вашего проекта.
Таким образом, даже если пакет, который зависит от изменений в будущем,
вы можете настаивать на том, что вы хотите, чтобы пользователь установил только определенную
версию пакета для использования в вашем узловом приложении.
Кроме того, это делает ваши сборки воспроизводимыми,
а это означает, что, когда вы делитесь своим кодом с другими, они также могут сделать установку всех модулей узлов,
как мы увидим позже в этом упражнении, на своем собственном компьютере.
Поэтому, очевидно, ваш следующий вопрос будет: как мы создадим этот файл package.json?
Если вы запускаете новый проект, где вы хотите инициализировать
файл package.json, просто введите npm init в командной строке в папке проекта.
И тогда это проведет вас через набор шагов, которые позволят вам
настроить файл package.json.
Итак, давайте продолжим это для нашего тестового проекта Git.
Поэтому здесь я нахожусь в папке git-test в моем окне терминала.
Убедитесь, что вы также открываете окно терминала или командное окно, а
затем перейдите в папку git-test.
И в командной строке введите npm init.
А затем следуйте за вопросами, которые задаются.
Поэтому для названия проекта мы просто оставим его как git-test по умолчанию.
Для версии мы просто оставим его как 1.0.0.
Мы можем отредактировать это позже.
Для описания
это тестовый каталог
для изучения Git и Node.
Это не имеет значения, введите там какое-то описание.
И тогда точка входа, я бы просто сказал index.html.
Обычно, если это пакет узла, точка входа будет index.js.
Теперь эта папка, которую мы установили,
является папкой на основе index.html, поэтому я просто набрал в index.html.
Испытательная команда, ничего.
Git репозиторий, если мы уже настроили репозиторий git в предыдущем
упражнении, он автоматически предложит, что для вас, если нет,
это будет пустым и даст вам возможность ввести URL-адрес репозитория git,
в случае, если вы используете онлайн-репозиторий git.
Некоторые ключевые слова для вашего проекта, которые я оставлю пустым.
Автор, введите свое имя.
Давайте будем нарциссистами.
И лицензия.
А затем он покажет вам конфигурацию файла package.json в формате JSON.
Так что, если у вашей семьи есть JSON, выглядит ли это очень, очень знакомо вам.
Поэтому, если это выглядит хорошо, скажем, ОК, а
затем это приводит к созданию файла package.json.
Итак, теперь, если вы перечислите содержимое папки,
вы увидите файл package.json в содержимом папки.
Откройте эту тестовую папку Git в своем любимом редакторе,
а затем посмотрите содержимое файла package.json в своем редакторе.
В качестве следующего шага мы узнаем, как мы можем установить модуль узла с
помощью NPM, диспетчера пакетов узлов.
Итак, мы собираемся установить этот модуль узла, называемый как легкий сервер.
Световой сервер будет обслуживать содержимое этой папки git-test
на сервере, который он запускается, чтобы вы могли просматривать содержимое в браузере.
Учитывая, что у нас есть файл index.html,
если мы обслуживаем эту папку, то это будет веб-сайт.
И вы можете просмотреть index.html в браузере.
Итак, давайте настроим световой сервер, а затем мы увидим, как мы можем
использовать световой сервер для обслуживания содержимого этой папки.
Это очень, очень полезно, потому что если вы работаете над
проектом веб-разработки, вы хотите увидеть, где живая версия вашего проекта веб-разработки.
Таким образом, когда вы вносите изменения в свой проект,
вы можете увидеть изменения, которые сразу же отражены в браузере.
Таким образом, это очень хороший пакет узлов, который очень полезен для этой цели.
Так что давайте настроим этот световой сервер.
Для этого добавьте подсказку.
Введите install NPM.
Итак, обратите внимание, если вы хотите, чтобы NPM установил пакет узла,
вот как вы собираетесь его вызвать, а затем вы скажете lite-server.
И тогда, мы также хотим сохранить тот факт, что наш проект использует lite сервер.
Таким образом, мы сохраним эту информацию в файле package.json.
Поэтому, чтобы сделать это, вы собираетесь ввести - save-dev.
Теперь опция save-dev указывает, что этот облегченный сервер используется для
зависимости разработки для нашего проекта.
Если вы устанавливаете модуль узла, от которого ваш проект напрямую
зависит, вы бы установили его, просто сказав опцию -save.
Итак, давайте продолжим и установим его.
И вы терпеливо ждёте установки.
Это займет несколько минут, чтобы завершить установку.
После того, как это будет установлено, вы сразу
заметите, когда вы посмотрите на содержимое своей папки,
вы сразу заметите, что там создана папка с именем node_modules.
Теперь, если вы заходите в node_module, вы увидите
там целую кучу других подпапок, которые содержат модули узлов,
необходимые для таких, как наш модуль узла и так далее.
Итак, давайте краткий обзор папки модулей узла, чтобы увидеть
, что их содержимое.
Переходя в мою папку git-test, если вы идете в папку модулей узла,
вы увидите, как я уже сказал, целую кучу подпапок там.
Обычно вам не нужно вмешиваться в папку модулей узла.
Они просто существуют там, потому что они необходимы для [НЕразборчивых].
Таким образом, когда вы просматриваете, вы должны заметить папку с именем lite-server здесь.
Когда вы переходите в папку lite-server,
обратите внимание, в частности, на наличие файла index.js, а
затем на файл package.json и несколько других вещей.
Таким образом, это содержимое папки состоит из модуля узла Lite-server.
Но этот модуль узла Lite-server зависит от других модулей узла
, чтобы предоставить ему некоторые дополнительные функциональные возможности.
Поэтому, когда вы устанавливаете модуль узла облегченного сервера, он, в свою очередь,
установит много других модулей узла, от которых зависит сам световой сервер.
Вот почему вы видите взрыв
этих папок внутри модулей узла.
Не беспокойтесь об этом, сумма папок будет не
более нескольких десятков мегабайт.
Таким образом, он не будет заполнять ваш каталог мусором.
Это все важно для узла, чтобы быть в состоянии помочь вам.
В случае, если вам интересно о сервере lite-server и как он работает и так далее,
вы всегда можете перейти на этот сайт GitHub, где размещается сервер lite-server.
А затем найдите документацию для сервера Lite-сервера.
Я представлю вам все, что вам нужно знать о lite-сервере, когда мы проходим
этот курс и остальные курсы.
Поэтому вам не нужно слишком беспокоиться об этом, но на всякий случай, если вам интересно,
вы всегда можете зайти на сайт, чтобы узнать больше о lite-server.
Ссылка приведена в инструкциях по упражнению, и
дополнительные ресурсы являются частью этого урока.
После того, как вы завершите это, перейдите к.
Редактор, в котором у вас есть папка Git-Test, открыт, а
затем просмотреть содержимое файла package.json.
Таким образом, вы увидите, что файл package.json содержит именно ту информацию, которую
вы настроили с вашим NPM.
Таким образом, вы увидите версию имени и автора репозитория и,
в частности, обратите внимание на эту информацию здесь.
Он говорит, что DevDependencies, поэтому он указывает сервер lite-sever,
а также замечает, что он говорит о шляпе 2.2.2.
Таким образом, это означает, что этот конкретный проект
зависит от lite-сервера, который является по крайней мере версией 2.2.2 или выше.
Так что это очень полезно для нас.
Зачем нам эта информация здесь?
Позже, когда вы перейдете к другим упражнениям,
вы заметите, что, когда вы храните это в онлайн-репозитории,
вы не хотите хранить все в папке модулей узла.
Вы будете хранить только информацию обо всех файлах, которые мы создали.
Папка модулей узла всегда может быть воссоздана,
введя NPM install в нашей командной строке.
А затем на основе зависимостей и зависимостей dev
, которые перечислены в файле packager, все
модули узлов, от которых зависит ваш проект, будут автоматически установлены.
Мы увидим, что позже о том, как использовать
NPM install в этом курсе.
Теперь, когда мы находимся в файле package.json, давайте сделаем пару изменений
, так что мы сможем использовать сервер lite-server для обслуживания этого контента.
Поэтому прямо здесь, в этой опции, называемой скриптами,
давайте добавим еще один здесь.
Так что мы скажем «старт».
Таким образом, start - это команда, которую поддерживает NPM, которая
позволяет указать кучу вещей, которые будут запущены.
Так что позже мы увидим, как мы используем это.
Итак, здесь я собираюсь сказать «npm run lite».
И после этого теста я добавлю
еще одну запись под названием «lite»,
которую я настрою как «lite-server», хорошо?
С этими изменениями, давайте сохраним файл package.json.
И тогда, теперь наш проект настроен, так что теперь, если вы запустите lite- сервер,
содержимое вашей папки будет теперь обслуживаться в вашем любимом браузере.
Возвращаясь к нашей командной строке, добавьте приглашение.
Если я напечатаю, npm start, теперь вы видите, почему я помещаю эту
карточку входа в мой файл package.json.
Если я скажу npm start, независимо от того, какой старт настроен, как в файле package.json,
мы указываем, что индикатор запуска npm, а lite был указан как lite сервер.
Итак, по сути, мы говорим «Запустить сервер lite-сервера».
Итак, как только я введу npm start, он запустит lite-сервер, и
он будет обслуживать содержимое этой папки.
Теперь как вы получаете доступ к содержимому этой папки?
Если вы хотите получить доступ к этому локально,
вы получите доступ к нему, указав, что вы являетесь локальным: 3000.
Это настройки по умолчанию для сервера Lite-сервера.
Кроме того, это должно автоматически открыть
окно браузера вашего браузера по умолчанию и
показать содержимое индекса или HTML в окне браузера.
Здесь вы можете видеть, что я открыл свой редактор и
окно браузера, направленное на localhost: 3000
одновременно бок о бок, так что мы можем видеть,
как окно браузера будет немедленно отражать
любые изменения, которые мы вносим в нашу тестовую папку Git.
Так что позвольте мне перейти к index.html.
А потом ради космоса, я переверну это.
И тогда, так вот, вы можете видеть, что это содержание этого.
А теперь позвольте мне добавить еще один абзац.
И сохраните изменения, и тогда вы сразу заметите, что
изменение, которое я сделал в моем файле index.html, отражается в моем браузере.
Это обеспечивает очень хороший способ наблюдать в режиме реального
времени изменения, которые вы вносите в ваш код, отражаются в вашем браузере.
Поэтому, когда вы работаете над проектом,
вам будет очень уместно видеть изменения немедленно.
Поэтому, когда вы вносите изменения, а затем сохраняете файл,
измененный код немедленно загружается в ваш браузер.
Таким образом, вы можете сразу увидеть изменение отражается в окне вашего браузера.
Это очень полезный инструмент, пока вы занимаетесь разработкой своего проекта.
Именно поэтому я познакомил вас с этим Lite-сервером и
создал его так, чтобы мы могли использовать его, как мы разрабатываем веб-сайт в этом курсе.
Если вы помните, мы уже настроили нашу папку git-test как репозиторий Git.
Так что проверка снова, Мы
увидим, что у нас уже есть три коммита в нашем репозитории Git.
И этот репозиторий Git уже зеркально отражен в нашем онлайн-репозитории Git,
который мы создали в предыдущем упражнении либо в Bitbucket, либо в GitHub.
Моя папка git-test синхронизируется с моим
репозиторием Bitbucket в этом конкретном упражнении.
Итак, что я собираюсь сделать сейчас, это показать вам, как вы можете исключить некоторые
папки из папки проекта,
а затем убедитесь, что они не синхронизированы с вашим онлайн-репозиторием.
Теперь, как я уже сказал, папка node_modules всегда может быть воссоздана
, введя npm install в командной строке.
Вот почему, когда вы загружаете
содержимое своей папки в онлайн-репозиторий Git
или когда вы делаете фиксацию папки в свой репозиторий Git,
вы не хотите, чтобы папка node_modules или все подпапки под ней
были включены в фиксацию.
Итак, как мы можем исключить некоторые папки или
некоторые файлы из нашей папки из регистрации в нашем репозитории Git?
Поэтому для этого мы создадим файл с именем.gitignore.
Так вот имя файла, .gitignore.
Таким образом, чтобы создать этот файл.gitignore, мы перейдем к нашему редактору.
Поэтому в редакторе, в папке git-test,
я собираюсь создать новый файл, и я назову его .gitignore.
Обратите внимание, что имя начинается с точки, а
затем, остальное имя g-i-t-i-g-n-o-r-e.
Так что это очень важно, чтобы вы создали файл с именно таким именем,
.gitignore.
Итак, давайте создадим этот файл под названием .gitignore, и
первая строка этого файла, мы будем вводить как node_modules.
Так что это означает, что папка node_modules будет
исключена из нашего git commit.
Поэтому, как только я создаю этот файл.gitignore, а
затем добавлю node_modules в файл.gitignore, давайте сохраним изменения.
И тогда мы теперь сделаем фиксацию текущего состояния нашего проекта
в наш репозиторий Git.
Надеюсь, вы помните свои команды git.
Давайте сделаем статус git, а затем, когда вы это сделаете,
вы сразу заметите, что у вас есть
файл index.html, помеченный как измененный, а затем два новых файла, .gitignore и package.json.
Итак, мы делаем git add., а затем делаем статус git.
И тогда вы видите, что все эти новые файлы были проверены в вашей фиксации.
Давайте сделаем git commit. git commit -m «четвертый commit».
И файлы зафиксированы.
Давайте подтолкнем новую фиксацию в наш онлайн-репозиторий.
Итак, чтобы сделать этот git push -u
origin master и дождаться
, пока он будет нажат на наш сервер.
Теперь, если вы перейдете в свой онлайн-репозиторий Git,
вы увидите, что файл package.json и
.gitignore были бы зарегистрированы в вашем репозитории Git.
Перейдя в мой репозиторий Bitbucket из теста Git, вы увидите, что,
когда я смотрю на источник, вы увидите, что файл package.json был добавлен.
Добавлен файл.gitignore, и новый файл index.html был возвращен.
Таким образом, это завершает это упражнение.
Таким образом, в этом упражнении
мы узнали, как настроить файл package.json с помощью npm init.
Мы научились устанавливать модуль npm.
И мы научились использовать модуль lite-server npm для обслуживания
содержимого нашей папки проекта, чтобы его можно было просматривать в браузере.
Таким образом, это хороший способ обслуживания вашего веб-содержимого,
вашего веб-приложения или вашего веб-сайта, так
что вы можете видеть изменения в реальном времени отражаются в окне вашего браузера.
И тогда мы также увидели, как мы можем настроить .gitignore так, что некоторые
папки могут быть исключены из проверки в нашем репозитории Git.
Это упражнение завершается.
Поэтому с этим я уверен, что вы получили хорошую
дескрипцию по использованию как Git, так и модулей узлов и узлов.
Не волнуйтесь, мы будем использовать узел широко, различными способами,
по мере прохождения курсов этой специализации.
Это всего лишь начало.
[ МУЗЫКА]