Все, что вам нужно знать, от настройки рабочей среды разработки до запуска сервера Node.

Это вторая часть этой серии. Щелкните здесь, чтобы прочитать Часть 1.

В первой части этой серии я рассказал о цели написания этой статьи и ее объеме. Я также определил, что мы будем строить, а также пользовательскую историю, которая удовлетворяет наших пользователей. Если вы это пропустили, нажмите здесь. Это первая часть.

Итак, разобравшись с этим, давайте приступим к настройке нашей среды разработки. Вот инструменты, с которыми вам придется работать:

  1. Текстовый редактор: я предпочитаю работать с VSCode, но в любом случае используйте то, что вам удобно. Наиболее популярны VSCode, Atom и Sublime Text. Текстовый редактор - это место, где вы будете вводить все свои коды.
  2. Git: Git помогает отслеживать изменения в кодах. У меня есть статья, которая поможет вам начать работу, если вы новичок в git, нажмите Не зацикливайтесь на Git. Если вы не установили git, сделайте это, нажав здесь.
  3. NodeJS: Node - это среда выполнения JavaScript, построенная на движке Chrome V8 JavaScript. Node позволяет писать JavaScript для сервера. Чтобы загрузить Node на свой компьютер, нажмите здесь. Node также поставляется со своим диспетчером пакетов (NPM). Об этом мы поговорим позже.
  4. Почтальон: Почтальон - отличный инструмент для тестирования наших HTTP-методов. Вы спросите, какие методы HTTP? Все просто, см. Здесь. Чтобы скачать Почтальон, нажмите здесь.

Надеюсь, я не потерял наших новичков, в основном скачал и установил все вышеперечисленные инструменты, если у вас их еще нет. Возможно, вы захотите узнать больше о каждом инструменте, фактически открыв встроенные ссылки. Разобравшись с этим, давайте взглянем на некоторые коды.

О да, я должен упомянуть, что есть такая вещь, как рабочий процесс. Если вы собираетесь работать в команде, я надеюсь, что вы это делаете, или вносите свой вклад в проекты с открытым исходным кодом, вы должны понимать, с каким рабочим процессом работают участники проекта. Наиболее распространенным является рабочий процесс gitflow, чтобы узнать больше, нажмите здесь. Мы будем использовать рабочий процесс gitflow в этом проекте, это означает, что мы будем создавать определенные ветки для определенных функций и объединять ветки в ветку разработки, когда мы закончим.

Я, наверное, забыл упомянуть, что вам понадобится учетная запись GitHub. Если у вас его нет, не волнуйтесь, создать его очень просто. Просто нажмите здесь, чтобы обойти это. Хороший. Пока вы там, создайте новый репозиторий для этого проекта.

Поздравляю вас, если вы дошли до этого момента. Не торопитесь, обратите внимание, что я проверил README, раскрывающийся список .gitignore также читает Node, а лицензия читает MIT.

Обратите внимание, что по умолчанию ваш репозиторий git настроен на master, однако в рабочем процессе gitflow мы не фиксируем основную ветку, вот почему.

Затем мы клонируем этот проект на наш локальный компьютер. Мы сделаем это с помощью простой команды git. Щелкните клонировать и скопируйте предоставленную ссылку. Мы вставим этот код в наш GitBash. Помните, это был второй скачанный нами инструмент.

// Clone the project
git clone https://github.com/blackdevelopa/ProjectSupport.git
// To move into the project’s directory.
cd projectsupport
// To create and checkout to new branch.
git checkout -b develop
// To launch VSCode on local computer.
code .

Итак, вот что я сделал. Я клонировал проект из Github, переместился в каталог проекта и создал новую ветку разработки в главной ветке. Наша ветвь разработки будет нашей активной ветвью, мы будем добавлять новые функции в эту ветку по мере продвижения.

Выполнено? Потрясающие. Далее идет файл package.json.

Package.json - отличный способ управления нашими локально установленными зависимостями. Зависимости - это то, от чего зависит работа нашего приложения. Чтобы создать package.json, мы просто инициализируем NPM. NPM - это диспетчер пакетов узлов, который практически дает нам доступ к большому реестру пакетов, который мы можем просто вставить в нашу базу кода. Подробнее здесь.

Вот как это работает:

npm init

Это инициализирует npm, запрашивая у вас конкретную информацию, с помощью которой можно создать package.json. Введите это в свой интегрированный терминал git, используя Git Bash или интегрированный терминал VSCode git. Еще одна причина, по которой я люблю VSCode. Однако вы можете пропустить запрос и принять значения по умолчанию с помощью приведенного ниже кода:

npm init --yes

Если вы все сделали правильно, у вас должен быть файл package.json, а это значит, что теперь вы готовы установить зависимости, которые потребуются нам для сборки нашего приложения.

Сначала мы установим Express. Express - это NPM, который позволяет нам легко создавать веб-приложения. Подробнее читайте здесь.

npm install express --save

Приведенный выше код установит express в наш список зависимостей, и это будет связано с папкой node_modules, которую мы никогда не хотим выкладывать в онлайн. Однако мы уже разобрались с этим с помощью файла .gitignore, который мы проверили при создании этого репозитория. Это говорит git не отслеживать любые изменения, происходящие в этом каталоге. Нам нужно будет зафиксировать эти изменения, но сначала давайте создадим входной файл нашего приложения.

Наш входной файл содержит набор инструкций, необходимых для запуска нашего приложения. С учетом сказанного, давайте настроим наш входной файл.

touch app.js
start app.js

Первая команда создает для нас файл app.js. Вторая команда открывает файл. Код start работает для Windows, насчет других ОС я не уверен.

// Call in installed dependencies
const express = require('express');
// set up express app
const app = express();
// set up port number
const port = 5035;
// set up home route
app.get('/', (request, respond) => {
  respond.status(200).json({
    message: 'Welcome to Project Support',
  });
});
app.listen(port, (request, respond) => {
  console.log(`Our server is live on ${port}. Yay!`);
});

Строки 2 и 5 в основном вызывают и настраивают наше экспресс-приложение. Строка 8 устанавливает номер порта. Маршрут 11–19 устанавливает наш домашний маршрут. В чем смысл запроса и ответа, спросите вы? Круто, см. Здесь. Кроме того, каков статус (200)? Круто, см. Здесь. Обратите внимание, мы используем литералы шаблонов ES6 в строке 18, а не конкатенацию.

// This is ES5 concatenation
console.log('Our server is live on' + port. + 'Yay!');
// This is ES6 template literals
console.log(`Our server is live on ${port}. Yay!`);

Наконец, давайте запустим наш сервер.

node app.js

Теперь наш сервер запущен, и мы успешно настроили нашу среду разработки, пришло время развить это. Однако мы должны сделать еще несколько вещей. Во-первых, мы должны зафиксировать наши файлы. Запустите код на своем терминале.

// To add all your files
git add .
// To commit all your files to local repository
git commit -m 'initialized and set up our server'

Мы отправим его в наш удаленный репозиторий позже, после установки некоторых важных зависимостей разработки. Мы будем устанавливать следующее:

  1. Eslint: это проект с открытым исходным кодом, который предоставляет подключаемую утилиту линтинга для JavaScript для более чистых кодов. По сути, Eslint помогает нам писать более чистые коды. Подробнее."
  2. BabelJS: это компилятор для написания JavaScript нового поколения. Он соответствует более ранним версиям ECMA к ES5. Подробнее."
  3. Nodemon: используется во время разработки приложения на основе NodeJS путем отслеживания любых изменений в приложении и автоматического перезапуска сервера. Подробнее."

Давайте быстро установим их:

npm install eslint babel-cli babel-core babel-preset-env nodemon --save-dev

Давайте добавим в наш package.json строку кода, чтобы включить наблюдение за nodemon и сбросить наше приложение после каждого изменения. Сделайте это под тегом скрипта.

"start:dev": "nodemon app.js --exec babel-node"

Затем мы создадим файл .babelrc в нашей корневой папке для настройки babel. Введите следующий код в свой терминал.

// create a .babelrc
touch .babelrc
// set up babel
{
  "presets": ["env"]
}

Наконец, мы настроим eslint. Подробности вы можете увидеть здесь.

// initialize eslint
./node_modules/.bin/eslint --init

Eslint запросит понимание вашего приложения перед завершением инициализации. Для этого проекта я выбрал следующее:

./node_modules/.bin/eslint app.js

С помощью приведенного выше кода Eslint теперь просматривает наш код, определяя шаблоны, чтобы сделать наши коды более согласованными и избежать ошибок.

Если вы дошли до этого момента, вы сделали потрясающе хорошо. Теперь мы можем опираться на то, что уже сделали. Давайте завершим это фиксацией и отправим в наш удаленный репозиторий.

// show working tree status
git status
// add all files
git add .
// commit all files to local repository
git commit -m 'refactored our codes'
// push to github
git push origin develop

В следующей статье вы познакомитесь с разработкой операций CRUD для нашего приложения. Чтобы перейти к третьей статье, нажмите здесь.