Как создать проект node js

Введение в Node JS

Node.js представляет среду выполнения кода на JavaScript, которая построена на основе движка JavaScript Chrome V8, который позволяет транслировать вызовы на языке JavaScript в машинный код. Node.js прежде всего предназначен для создания серверных приложений на языке JavaScript. Хотя также существуют проекты по написанию десктопных приложений (Electron) и даже по созданию кода для микроконтроллеров. Но прежде всего мы говорим о Node.js, как о платформе для создания веб-приложений.

Node.js является открытым проектом, исходники которого можно посмотреть на github.com.

Установка

Для загрузки перейдет на официальный сайт https://nodejs.org/en/. На главной странице мы сразу увидим две возможные опции для загрузки: самая последняя версия NodeJS и LTS-версия.

Загрузим последнюю версию. В моем случае это версия 16.1.0. Для Windows установщик представляет файл с расширением msi. После запуска откроется программа установщика:

После успешной установки вы можем ввести в командной строке/терминале команду node -v , и нам отобразится текущая версия node.js:

C:\WINDOWS\system32>node -v v16.1.0

Версии node.js для других операционных систем наряду с исходниками можно найти по адресу https://nodejs.org/en/download/

Инструменты разработки

Для разработки под Node JS достаточно простейшего текстового редактора, в частности, Notepad++. Также можно использовать более изощренные редакторы типа Atom, Sublime, Visual Studio Code, либо среды разработки, которые поддерживают работу с Node.JS, например, Visual Studio или WebStorm.

REPL

После установки NodeJS нам становится доступным такой инструмент как REPL. REPL (Read Eval Print Loop) представляет возможность запуска выражений на языке JavaScript в командной строке или терминале.

Так, запустим командную строку (на Windows) или терминал (на OS X или Linux) и введем команду node . После ввода этой команды мы можем выполнять различные выражения на JavaScript:

C:\WINDOWS\system32>node Welcome to Node.js v16.1.0 Type ".help" for more information. > 2+6 8 >

Или используем какую-нибудь функцию JS:

> console.log("Hello NodeJS"); Hello NodeJS undefined >

Можно определять свои функции и затем их вызывать, например, возведение числа в квадрат:

> function square(x) undefined >square(5) 25 >

Если мы введем что-то неправильно, то REPL укажет об ошибке:

Выполнение файла

Вместо того чтобы вводить весь код напрямую в консоль, удобнее вынести его во внешний файл. Например, создадим на жестком диске новый каталог, допустим, C:\node\helloapp , в который поместим новый файл app.js со следующим кодом:

console.log("Hello world");

В командной строке перейдем с помощью команды cd к каталогу helloapp, а затем выполним команду:

node app.js

Данная команда выполнит код из файла app.js:

Node, Express и libsass: проект с нуля

Что за шум вокруг Node.js? Почему так много людей говорит о нём? Следуйте за мной в этом руководстве, которое поможет понять процесс создания Node-проекта с нуля.

Но мы не остановимся на Node. В «полноценном мире JavaScript» существует целая экосистема инструментов, о которых вы должны знать. Кроме Node есть Express, npm, Bower, Grunt, Gulp и др.

Целью этой книги является не глубокое погружение в какую-то одну конкретную тему, а расширение кругозора, необходимого для создания хорошего фундамента.

Оригинал книги доступен по этому адресу:

• Node и npm
• Express, Node-фреймворк
• Установка и настройка Grunt
• Узнайте больше о Gulp
• Добавление libsass
• grunt-watch
• Bower для всего
• Bower + Grunt + Sass
• Добавление данных
• Развёртывание кода на Heroku
• Создание демонстрационной формы

Дейл Санде

Ведущий разработчик интерфейсов в AppDirect (Сан-Франциско). Ведущий инструктор Code Fellows (Сиэтл), Web UI Development Accelerator и других курсов повышения квалификации.

• Node и npm
• Express, Node-фреймворк
• Установка и настройка Grunt
• Узнайте больше о Gulp
• Добавление libsass
• grunt-watch
• Bower для всего
• Bower + Grunt + Sass
• Добавление данных
• Развёртывание кода на Heroku
• Создание демонстрационной формы

Гл. редактор: Влад Мержевич

О сайте

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

Связи

Разделы сайта

Популярное

• Уроки по HTML и CSS
• Руководство по флексбоксам
• HTML5 и CSS3 на примерах
• Руководство по JSON
• Как верстать на HTML5 и CSS3
• Продвинутые уроки по HTML и CSS
• Визуальное руководство по свойствам flexbox
• Создание первого приложения на Node

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Создаем свой первый проект на Node JS

У меня есть товарищ и я ему помогаю советом как разбираться в премудростях разработки. Недавно я дал ему задание — создать свой первый проект на NodeJS и небольшое тестовое задание.

И тут я понял, что, помимо написания кода и реализации задачи, необходимо рассказать всё, что необходимо для написания хорошего проекта.

Я буду писать много очевидных и банальных вещей, но, я уверен, что вы тоже можете пропускать один из пунктов и не уделять ему должное внимание.

Создайте репозиторий для проекта

Первое — вам нужно создать репозиторий для проекта. Стандартом для разработки является git и есть много популярных сервисов github, bitbucket, gitlab. Просто выберите один из сервисов и пользуйтесь, они все хорошие.

• Привяжите ssh ключ вашей рабочей машины к аккаунту, это позволит работать с проектами по ssh-протоколу.
• При создании проекта объязательно настройте .gitignore, шаблоны для популярных языков сервисы предоставляют.
• Разберитесь с основными командами git-а: pull, push, add, commit, merge, rebase, status, diff, log, branch, checkout.
• У каждый команды есть рабочий процесс для git-а. Изучите один из подходов, например, git flow.
• Попробуйте использовать git “по взрослому”. Создавайте ветки и подветки, делайте мержи и ребейзы. Не бойтесь что-то сломать, это тестовый проект.
• Если вам нравится GUI, то присмотритесь к одному из них. Например, gitk.
• Почитайте про git книжку. Git Pro — одна из них.
• Посмотрите пару видео про git: git yandex.
• Не застревайте сильно на git-е, разберитесь в основах и двигайтесь дальше.

Создайте проект

Здесь, вроде, всё просто: команда npm init и проект создан. Для первого проекта стандартный пакетный менеджер npm будет отличным выбором, но почитать про yarn или pnpm.

• Изучите package.json файл, секция main, scripts вам понадобится, а отличие dependencies от devDependencies нужно понимать.
• Разберитесь с концепцией версионирования пакетов ..
• Попробуйте установить парочку популярных пакетов lodash или express. Поиграйте с версиями: сможете откатить пакет до нужной версии или быстро обновить все пакеты до акуальной версии?
• Присмотритесь к полезным утилитам: npm-check или npm-check-updates
• Попробуйте установить нужный пакет из репозитория или из локальной папки.
• Задание со звёздочкой. Попробуйте создать свой пакет, разберитесь с .npmingore файлом и с различными pre и post хуками npm-ма.

Качество кода

Для проекта вам нужно будет настроить linter или prettier. Я рекомендую eslint, но можно использовать prettier. Есть ещё editorconfig, я его добавляю в свои проекты.

• Используйте eslint init, он подскажет удобную для вас конфигурацию.
• Подключите один из готовых конфигов standard или airbnb. Для первого проекта это будет достаточно.
• Не стесняйтесь отключать или изменять правила, если они вам не нравятся. Но будьте рассудительными, некоторые правила повышают безопастность вашего проекта, их лучше не менять.
• У линтера есть куча плагинов, они помогут повысить качество вашего кода и спасут от ошибок. Например, import-plugin.
• Настройте вашу IDE для работы с eslint-ом. Например, в VSCode autofix на каждое сохранение файла помогает сразу писать красивый код.
• Разберитесь с опциями eslint. Например, опция cache может помочь не запускать каждый раз проверку всего кода.
• Добавьте все скрипты в package.json/scripts секцию. Скрипт lint и lint:fix там должен быть точно.

Тестирование

Может быть, тестирование вам сразу не понадобится, но лучше всё сразу настроить, чтобы не тратить время потом. Существует множество пакетов для тестирования кода: mocha, chai, jest, jasmine, tap, sinon. Они все хорошие, просто выберете те, который вам нравится. Может быть их будет несколько.

• Почитайте TDD и BDD подходы. Разберитесь чем отличается unit, integration и end-to-end тестирование.
• Всегда помните, что тестирование должно помогать вам разрабатывать, писать код без багов и вносить изменения в существующий код без страха. Не применяйте разработку через тестирование, если вам не понятно, зачем оно. Но разобраться надо.
• Подумайте, как лучше протестировать ваш проект, возможно вам будет достаточно написать несколько e2e-тестов. Ваша задача реализовать проект без багов, а не протестировать 100-процентов кода.
• Пишите код с мыслью “а как его можно протестировать?”.
• Заполните секцию в package.json test командой, которая запускает вашы тесты.

Настройка git hook

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

Для этой задачи пакет husky или pre-commit может подойти.

Разработка

Для разработки вам может или специальное окружение, которое можно создать через docker или утилита, которая будет перезапускать ваш проект в случае изменения кода, например, nodemon.

Скажу так, если начать разбираться ещё с докером, то свой первый проект можно не начать. Но почитать стоит. Например, вам может понадобится прикрутить какую-нибудь базу данных к проекту, проще это сразу сделать в докере.

В заключении

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

Настройка проекта Node с помощью Typescript

Node — это среда исполнения, позволяющая писать серверный код JavaScript. Она получила очень широкое распространение после своего выпуска в 2011 году. С ростом базы кода написание серверного кода JavaScript может представлять сложности в связи с характером языка JavaScript: динамичным и слабо типизированным.

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

TypeScript — это типовой (опциональный) супернабор JavaScript, который может помочь со сборкой и управлением крупномасштабными проектами JavaScript. Его можно представить как JavaScript с дополнительными возможностями, включая мощное статическое типирование, компиляцию и объектно-ориентированное программирование.

Примечание. С технической точки зрения TypeScript является супернабором JavaScript, и это означает, что весь код JavaScript является корректным кодом TypeScript.

Перечислим некоторые преимущества использования TypeScript:

1. Опциональная статическая типизация.
2. Логическая обработка типов.
3. Возможность использования интерфейсов.

В этом учебном модуле вы настроите проект Node с помощью TypeScript. Вы создадите приложение Express с помощью TypeScript и преобразуете его в компактный и надежный код JavaScript.

Предварительные требования

Перед началом прохождения этого модуля вам нужно будет установить Node.js на вашем компьютере. Для этого можно выполнить указания руководства Установка Node.js и создание локальной среды разработки для вашей операционной системы.

Шаг 1 — Инициализация проекта npm

Для начала создайте новую папку с именем node_project и перейдите в этот каталог.

Затем инициализируйте его как проект npm:

После запуска npm init вам нужно будет передать npm информацию о вашем проекте. Если вы разрешите npm принимать ощутимые значения по умолчанию, вы можете добавить флаг y , чтобы пропустить диалоги с запросом дополнительной информации:

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

Шаг 2 — Установка зависимостей

Следующий шаг после инициализации базового проекта npm — установить зависимости, требующиеся для запуска TypeScript.

Запустите следующие команды из каталога вашего проекта для установки зависимостей:

Флаг -D — сокращенное обозначение опции: —save-dev . Более подробную информацию об этом флаге можно найти в документации npmjs.

Пришло время установить платформу Express:

Вторая команда устанавливает типы Express для поддержки TypeScript. Типы в TypeScript — это файлы, которые обычно имеют расширение .d.ts . Файлы используются для предоставления типовой информации об API, в данном случае структуры Express.

Этот пакет требуется, потому что TypeScript и Express являются независимыми пакетами. Без пакета @types/express у TypeScript нет способа узнавать типы классов Express.

Шаг 3 — Настройка TypeScript

В этом разделе мы настроим TypeScript и проверку соблюдения стандартов для TypeScript. TypeScript использует файл tsconfig.json для настройки опций компилятора для проекта. Создайте файл tsconfig.json в корне каталога проекта и вставьте следующий фрагмент кода:

tsconfig.json

 "compilerOptions":  "module": "commonjs", "esModuleInterop": true, "target": "es6", "moduleResolution": "node", "sourceMap": true, "outDir": "dist" >, "lib": ["es2015"] > 

Давайте рассмотрим некоторые ключи во фрагменте кода JSON выше:

• module : указывает метод генерирования кода модуля. Node использует commonjs .
• target : указывает уровень языка на выходе.
• moduleResolution : помогает компилятору определить, на что ссылается импорт. Значение node имитирует механизм разрешения модуля Node.
• outDir : Это место для вывода файлов .js после транспиляции. В этом учебном модуле мы сохраним его как dist .

В качестве альтернативы созданию и заполнения файла tsconfig.json вручную можно запустить следующую команду:

Эта команда сгенерирует файл tsconfig.json с правильными комментариями.

Чтобы узнать больше о доступных опциях ключ-значение, можно использовать официальную документацию TypeScript, где приводятся разъяснения всех опций.

Теперь вы можете настроить проверку соответствия стандартам кода TypeScript для этого проекта. Откройте в терминале корневой каталог вашего проекта, который установлен в этом учебном модуле как node_project , и запустите следующую команду для генерирования файла tslint.json :

Откройте сгенерированный файл tslint.json и добавьте соответствующее правило no-console :

tslint.json

 "defaultSeverity": "error", "extends": ["tslint:recommended"], "jsRules": >, "rules":  "no-console": false >, "rulesDirectory": [] > 

По умолчанию модуль проверки TypeScript предотвращает использование отладки через команды консоли , поэтому нужно явно предписать ему отключить правило по умолчанию no-console .

Шаг 4 — Обновление файла package.json

Сейчас вы можете запускать функции в терминале по отдельности или создать скрипт npm для их запуска.

На этом шаге мы создадим скрипт start , который выполнит компиляцию и транспиляцию кода TypeScript, а затем запустит полученное приложение .js .

Откройте файл package.json и обновите его соответствующим образом:

package.json

 "name": "node-with-ts", "version": "1.0.0", "description": "", "main": "dist/app.js", "scripts":  "start": "tsc && node dist/app.js", "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC", "devDependencies":  "@types/express": "^4.16.1", "tslint": "^5.12.1", "typescript": "^3.3.3" >, "dependencies":  "express": "^4.16.4" > > 

В приведенном выше фрагменте кода мы обновили путь main и добавили команду start в раздел scripts. Если посмотреть на команду start , вы увидите, что вначале запускается команда tsc , а затем — команда node . При этом будет проведена компиляция, и сгенерированный вывод будет запущен с помощью node .

Команда tsc предписывает TypeScript скомпилировать приложение и поместить сгенерированный вывод .js в указанном каталоге outDir , как указано в файле tsconfig.json .

Шаг 5 — Создание и запуск базового сервера Express

Теперь TypeScript и модуль проверки настроены, и мы можем приступить к сборке модуля Node Express Server.

Вначале создайте папку src в корневом каталоге вашего проекта:

Затем создайте файл с именем app.ts :

На этом этапе структура каталогов должна выглядеть следующим образом:

├── node_modules/ ├── src/ ├── app.ts ├── package-lock.json ├── package.json ├── tsconfig.json ├── tslint.json 

Откройте файл app.ts в предпочитаемом текстовом редакторе и вставьте следующий фрагмент кода:

import express from 'express'; const app = express(); const port = 3000; app.get('/', (req, res) =>  res.send('The sedulous hyena ate the antelope!'); >); app.listen(port, err =>  if (err)  return console.error(err); > return console.log(`server is listening on $port>`); >); 

Приведенный выше код создает сервер Node, прослушивающий порт 3000 на предмет запросов. Запустите приложение с помощью следующей команды:

При успешном выполнении сообщение будет зарегистрировано на терминале:

Теперь вы можете открыть в браузере адрес http://localhost:3000 и увидите следующее сообщение:

Откройте файл dist/app.js , и вы найдете в нем транспилированную версию кода TypeScript:

"use strict"; var __importDefault = (this && this.__importDefault) || function (mod)  return (mod && mod.__esModule) ? mod :  "default": mod >; >; Object.defineProperty(exports, "__esModule",  value: true >); const express_1 = __importDefault(require("express")); const app = express_1.default(); const port = 3000; app.get('/', (req, res) =>  res.send('The sedulous hyena ate the antelope!'); >); app.listen(port, err =>  if (err)  return console.error(err); > return console.log(`server is listening on $port>`); >); //# sourceMappingURL=app.js.map 

Вы успешно настроили проект Node для использования TypeScript.

Заключение

В этом учебном модуле вы узнали, почему TypeScript полезен для написания надежного кода JavaScript. Также вы узнали о некоторых преимуществах работы с TypeScript.

Наконец, вы настроили проект Node с использованием структуры Express, но скомпилировали и запустили проект с помощью TypeScript.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.