[MUSIC]
Теперь, когда у вас есть Node.js на вашем компьютере,
вы, очевидно, хотите немедленно начать использовать его.
Таким образом, в этом упражнении мы начнем использовать узел.
Мы создадим файл package.json для
нашей папки git-test, с которой мы работали до сих пор,
то мы создадим модуль узла, называемый как lite-server, который
будет обслуживать содержимое нашей папки git-test.
И тогда мы можем просматривать этот файл index.html и
другие файлы в браузере.
И мы также увидим, как лайт-сервер позволит
нам автоматически видеть обновления нашего браузера
окна, как мы вносим изменения в наш файл index.html или
любые другие файлы в нашей папке git-test.
Лайт-сервер это то, что мы будем широко использовать в этом и
будущих курсах, чтобы иметь возможность видеть изменения в режиме реального времени в
окно браузера, когда вы редактируете файлы вашего проекта.
Как я уже упоминал, мы хотим настроить файл package.json.
Итак, что именно за файл package.json, который мы собираемся настроить?
Итак, у меня есть некоторая информация с
сайта npmjs.org, который указывает, что
точно является ролью файла package.json.
Таким образом, файл package.json служит документацией
на то, от чего зависит ваш проект.
Так, например, когда вы настраиваете lite-сервер для
вашего проекта, он будет записан в файл package.json.
Чтобы впоследствии вы также могли использовать этот пакет в будущем.
Также он позволяет указать, какая конкретная версия пакета
зависит от вашего проекта.
Таким образом, даже если пакет, который зависит от изменений в будущем,
вы можете настаивать на том, что вы хотите, чтобы пользователь установил только определенную
версию пакета для использования в вашем приложении Node.
А также это делает ваши сборки воспроизводимыми,
, что означает, что когда вы делитесь своим кодом с другими,
то они также могут сделать установку всех модулей узла,
, как мы увидим позже в этом упражнении, на их собственном компьютере.
Итак, очевидно, ваш следующий вопрос будет: как мы создадим этот файл package.json?
Если вы начинаете новый проект, в котором вы хотите инициализировать файл package.json
, просто введите npm init в командной строке в папке проекта.
И тогда это приведет вас через набор шагов
, которые позволят вам настроить файл package.json.
Итак, давайте приступим к этому для нашего проекта git-test.
Итак, здесь я нахожусь в папке git-test в моем окне терминала.
Убедитесь, что вы также открыли окно терминала или
командное окно, а затем перейдите в папку git-test.
И в подсказке введите npm init, а затем следуйте задаваемые вопросы.
Так что для названия проекта мы просто оставим его как по умолчанию, git-test.
Для версии, мы просто оставим его как 1.0.0.
Мы можем отредактировать это позже.
Для описания,
Это тестовый каталог
для изучения Git и Node.
Неважно, введите там какое-то описание.
А затем точка входа, я просто скажу index.html.
Обычно, если это пакет Node, точкой входа будет index.js.
Теперь эта папка, которую мы создали, является папкой на основе index.html,
, поэтому я просто набираю index.html.
Контрольная команда, ничего.
Git репозиторий, если мы уже настроили репозиторий Git в предыдущем упражнении
, он автоматически предложит это для вас.
Если нет, это будет пустым и даст вам возможность ввести URL-адрес репозитория Git
в случае, если вы используете онлайн-репозиторий Git.
Некоторые ключевые слова для вашего проекта, которые я оставлю пустым.
Автор, введите свое имя.
Давайте будем нарциссизмом.
И лицензия.
И тогда он покажет вам конфигурацию файла package.json в формате JSON.
Так что, если вы знакомы с JSON, это будет выглядеть очень, очень знакомо вам.
Так что, если это выглядит хорошо, давайте просто скажем хорошо.
И тогда это приводит к созданию файлов package.json.
Итак, теперь, если вы перечислите содержимое папки,
вы увидите файл package.json в содержимом папки.
Откройте папку git-test в вашем любимом редакторе и
затем взгляните на содержимое файла package.json в вашем редакторе.
В качестве следующего шага мы узнаем, как мы можем установить
модуль узла с помощью NPM, диспетчера пакетов узлов.
Итак, мы собираемся установить этот модуль узла, называемый как lite-server.
Лайт-сервер будет обслуживать содержимое этой папки git-test в
на сервере, который он запускает, чтобы вы могли просматривать содержимое в браузере.
Учитывая, что у нас есть файл index.html, если мы обслуживаем эту папку
, тогда это будет веб-сайт, и вы можете просмотреть index.html в браузере.
Итак, давайте настроим лайт-сервер, а затем мы увидим, как мы можем сделать
использование лайт-сервера для обслуживания содержимого этой папки.
Это очень, очень полезно, потому что если вы работаете над проектом веб-разработки,
вы хотите увидеть живую версию вашего проекта веб-разработки так
, что, когда вы вносите изменения в свой проект,
вы можете видеть изменения сразу отражаются в браузере.
Так что это очень хороший пакет Node, который очень полезен для этой цели.
Так что давайте настроим лайт-сервер.
Чтобы сделать это в командной строке, введите npm install.
Так что обратите внимание, если вы хотите, чтобы npm установил пакет Node,
вот как вы собираетесь его вызвать.
И тогда вы бы сказали «лайт-сервер».
И тогда мы также хотим сохранить тот факт, что наш проект использует lite-сервер.
Поэтому мы сохраним эту информацию в файле package.json.
Итак, чтобы сделать это, мы собираемся ввести —save-dev.
Теперь опция save-dev указывает, что этот лайт-сервер используется для зависимостей разработки
для нашего проекта.
Если вы устанавливаете модуль Node, от которого ваш проект напрямую зависит
, то вы должны установить его, просто сказав опцию —save.
Так что давайте продолжим и установим его.
И терпеливо ждать установки.
Это займет все несколько минут, чтобы завершить его установку.
После того, как это установлено, то вы сразу
заметите, когда вы смотрите на содержимое вашей папки,
вы сразу заметите, что там есть папка, созданная с именем node_modules.
Теперь, если вы войдете в node_modules, вы увидите целую кучу
других подпапок, которые содержат модули узлов, которые
необходимы для модуля узла lite-sever и так далее.
Итак, давайте рассмотрим папку node_modules, чтобы увидеть
, что такое содержимое.
Идя в мою папку git-test, если вы собираетесь в папку node_modules,
вы увидите, как я сказал, целую кучу подпапок там.
Обычно вам не нужно рендеринг в папку node_modules,
они просто существуют там, потому что они нужны для lite-сервера.
Таким образом, как вы просматриваете вас, следует указать папку с именем lite-server здесь.
Когда вы заходите в папку lite-server, обратите внимание, в частности, на наличие
файла index.js, а затем файла package.json и несколько других вещей.
Таким образом, это содержимое папки включает модуль узла lite-server.
Но этот модуль узла lite-server зависит от других модулей узлов
, чтобы предоставить ему некоторую дополнительную функциональность.
Вот почему, когда вы устанавливаете модуль узла lite-server, он, в свою очередь,
устанавливает многие другие модули узлов, от которых зависит сам сервер lite-server.
Так вот почему вы видите взрыв
этих папок внутри папки node_modules.
Не стоит слишком беспокоиться об этом, сумма всего этого не будет превышать
несколько десятков мегабайт.
Таким образом, он не собирается заполнять ваш каталог этим мусором.
Это все необходимое для того, чтобы узел мог помочь вам.
В случае, если вам интересно о лайт-сервере, как он работает и так далее.
Вы всегда можете перейти на этот сайт GitHub, где размещен lite-сервер, а затем
искать документацию для lite-server.
Я познакомим вас с тем, что вам нужно знать о лайт-сервере, когда мы проходим
этот курс и остальные курсы.
Так что вам не нужно слишком беспокоиться об этом.
Но на всякий случай, если вам интересно,
вы всегда можете зайти на этот сайт, чтобы узнать более подробную информацию о lite-сервере.
Ссылка приведена в инструкции по упражнению и
дополнительные ресурсы части этого урока.
После того, как вы закончите это, перейдите в редактор
, где у вас есть папка, папка git-test, откройте и
, а затем просмотрите содержимое файла package.json.
Таким образом, вы увидите, что файл package.json содержит именно ту информацию, которую
вы настроили с вашим npm в нем.
Таким образом, вы увидите имя, версию и автора репозитория
и, в частности, обратите внимание на эту информацию здесь говорит devDependencies.
И затем он указывает lite-сервер, а также обратите внимание, что он говорит, ^2.2.2.
Таким образом, это означает, что этот конкретный проект зависит от
lite-сервера, который является по крайней мере версией 2.2.2.
Все высокий уровень.
Так что это очень полезно для нас.
Теперь, зачем нам эта информация нужна здесь, позже, когда вы переходите к другим упражнениям
, вы заметите, что при хранении ее в онлайн-репозитории.
Вы не хотите хранить все в папке node_modules.
Мы будем хранить только информацию обо всех файлах, которые мы создали.
Папка node_modules всегда может быть воссоздана, введя
nmp install в нашей командной строке.
А затем на основе зависимостей devDependencies и
, которые перечислены в файле package.json.
Все модули узлов, от которых зависит ваш проект, будут автоматически установлены
.
Мы увидим, что позже,
о том, как использовать npm install в этом курсе.
Теперь, когда мы находимся в файле package.json, давайте сделаем пару изменений так
, что мы сможем использовать lite-сервер для обслуживания этого контента.
Итак, прямо здесь в этом варианте называется скрипты,
давайте добавим еще один здесь.
Так скажем, начните.
Таким образом start - это команда, которая поддерживает npm
, которая позволяет вам указать кучу вещей, которые будут запущены.
Итак, позже мы увидим, как мы будем использовать это.
Так вот, я собираюсь сказать, npm бегать lite.
И после теста я собираюсь
добавить еще одну запись под названием,
lite, которую я настрою как lite-server.
Хорошо, с этими изменениями, давайте сохраним файл package.json и
, то теперь наш проект настроен.
Так что теперь, если вы запустите лайт-сервер,
содержимое вашей папки будет теперь обслуживаться в вашем любимом браузере.
Возвращаемся к нашей командной строке и подсказке.
Если я набираю npm start, теперь вы видите, почему
я помещаю эту запись под названием start в мой файл package.json.
Итак, если я скажу npm start, независимо от того, что этот старт настроен как,
в файле package.json.
Мы указываем, что как npm запускает lite, а затем lite был указан как lite-сервер.
По сути, мы говорим о запуске лайт-сервера.
Поэтому, как только я набираю, npm start, он запустит lite-сервер и
он будет обслуживать содержимое этой папки.
Теперь, как вы получаете доступ к содержимому этой папки?
Если вы хотите получить доступ к нему локально, вы получите доступ к нему по
, указав URL-адрес как локальный хост: 3000.
Это настройки по умолчанию для lite-сервера.
Кроме того, это должно автоматически открыть
окно браузера вашего браузера по умолчанию и
, а затем показать содержимое index.html в этом окне браузера.
Здесь вы можете видеть, что я открыл свой редактор и
окно браузера, направленное на локальный хост: 3000
одновременно бок о бок.
Чтобы мы могли видеть, как окно браузера будет сразу
отражать любые изменения, которые мы вносим в наши файлы в папке git-test.
Так что позвольте мне перейти к index.html.
А потом ради космоса я переверну это.
И тогда здесь вы можете видеть, что это содержание.
А теперь позвольте мне добавить в
еще один абзац,
и сохранить изменения.
И тогда вы сразу заметите, что изменение, которое
я сделал в моем файле index.html, отражается в моем браузере.
Это обеспечивает очень хороший способ наблюдать в режиме реального времени
изменения, которые вы вносите в свой код, отражаются в вашем браузере.
Поэтому, когда вы работаете над проектом, было бы очень уместно, чтобы
вы могли видеть изменения немедленно.
Таким образом, когда вы вносите изменения и сохраняете файл,
измененный код немедленно загружается в ваш браузер, поэтому
вы можете сразу увидеть изменение отражается в окне браузера.
Это очень полезный инструмент, пока вы занимаетесь разработкой своего проекта.
Вот почему я познакомил вас с lite сервером и
настроить его так, чтобы мы могли использовать его при разработке сайта в этом курсе.
Если вы помните, мы уже создали нашу папку git-test, чтобы быть репозиторием git,
, чтобы снова проверить, мы
увидим, что у нас уже есть три коммита в нашем репозитории git.
И этот репозиторий git уже в нашем онлайн-репозитории git,
который мы создали в предыдущем упражнении, либо в bitbucket, либо в GitHub.
Моя папка git-test синхронизирована с моим репозиторием bitbucket
в этом конкретном упражнении.
Итак, что я собираюсь сделать сейчас, это показать вам, как вы можете исключить некоторые папки
из папки проекта, а затем убедиться, что они не синхронизированы с вашим онлайн-репозиторием.
Теперь, как я уже сказал, папка модулей узла всегда может быть воссоздана
, набрав npminstall в подсказке.
Вот почему, когда вы загружаете содержимое
вашей папки в онлайн-репозиторий git или
, когда вы делаете фиксацию папки в свой репозиторий git,
вы не хотите, чтобы папка модулей примечания или все вложенные папки
под ней были включены в, Commit.
Итак, как мы исключаем некоторые папки или
некоторые файлы из нашей папки из нашего репозитория git.
Поэтому для этого мы создадим файл с именем.gitignore.
Так вот имя файла, .gitignore.
Таким образом, чтобы создать этот файл.gitignore, мы перейдем в наш редактор.
Поэтому в редакторе в тестовой папке git я собираюсь создать новый файл.
И я назовем его .gitignore.
Обратите внимание, что имя начинается с точки и
, то остальное имя G-I-T-I-G-N-O-R-E.
Так что это очень,
очень важно, что вы настроили филе с точно именем, .gitignore.
Итак, давайте создадим этот файл под названием, .gitignore, и
первую строку этого файла, мы будем вводить как node_modules.
Итак, это означает, что
папка модуля узла будет исключена из нашей git commit.
Поэтому, как только я создаю этот файл.gitignore, а затем добавлю модули узлов в файл.gitignore, давайте сохраним изменения.
И тогда мы теперь сделаем фиксацию текущего состояния нашего проекта
в нашем репозитории git.
Надеюсь, вы помните свои команды git.
Давайте сделаем статус git, а затем, когда вы это сделаете,
вы сразу заметите, что у вас файл index.html
помечен как измененный, а затем два новых файла, .gitignore и package.json.
Таким образом, мы делаем git add., а затем делаем статус git.
И тогда вы видите, что все эти новые файлы были возвращены в вашу фиксацию.
Давайте сделаем git commit, git commit -m «четвертый
commit». И файлы были совершены.
Давайте подтолкнем новую фиксацию в нашем онлайн-репозитории.
Итак, чтобы сделать это, git push
-u мастер происхождения.
И дождитесь, пока его вытолкнут на наш сервер.
Теперь, если вы перейдете в свой онлайн-репозиторий git,
вы увидите, что файл package.json и
.gitignore были бы возвращены в ваш репозиторий git.
Идем в мой репозиторий битведка для git-теста.
Вы увидите, что когда я смотрю на источник,
вы увидите, что файл package.json был добавлен,
.gitignore был добавлен, и новый файл index.html был проверен.
Так что это завершает это упражнение.
Таким образом, в этом упражнении
мы узнали, как настроить файл package.json с помощью npm minute.
Мы научились устанавливать модуль npm.
И мы научились использовать модуль lite server npm для обслуживания
содержимого нашей папки проекта, чтобы его можно было просмотреть в браузере.
Таким образом, это хороший способ обслуживания вашего содержимого,
вашего веб-приложения или вашего веб-сайта так
, что вы можете видеть изменения в реальном времени отражаются в окне браузера.
И затем мы также увидели, как они могут настроить .gitignore, чтобы некоторые папки
могли быть исключены из проверки в нашем репозитории git.
Это завершает это упражнение.
Таким образом, я уверен, что вы получили бы хороший ручек на
использования как git, так и модулей узла и узла.
Не волнуйся.
Мы будем широко использовать узел различными способами
по мере прохождения курсов этой специализации.
Это только начало.
[МУЗЫКА]