![Установка пакетов в проект
• Все внешние зависимости, установленные при помощи npm,
помещаются в папку node_modules проекта.
• Для установки зависимости в проекте необходимо вызвать команду
npm install --save [название пакета] без квадратных скобок.
• Модификатор --save указывает на то, что информация об этой
зависимости будет сохранена в package.json.
• Папку node_modules необходимо класть в .gitignore, поскольку
скачанные зависимости в репозиторий класть не нужно.](https://image.slidesharecdn.com/1-200421141653/85/NPM-6-320.jpg)
NPM и модульная архитектура приложения
- 1. Модульная архитектура. Сборщик Webpack Занятие 0 из 32. Курс Frontend-разработки на Javascript + Vue/React
- 2. Node.js • Node.js – среда выполнения Javascript-кода не в браузере, а на компьютере. • Node.js используется для: • Среда выполнения инструментов Frontend-разработи • Бэкенд-разработки на Javascript • Платформа разработки кроссплатформенных мобильных/десктоп- приложений
- 3. Node – установка • Скачать и установить Node: https://nodejs.org/en/ • Запустить Node можно в консоли ОС командой node.
- 4. NPM • NPM (Node Package Manager) – утилита, идущая в поставке с Node. • NPM используется для управления всеми внешними зависимостями в проекте и для организации рабочего окружения проекта. • Используется для: • Инициализации проекта как пакетного приложения • Установки и удаления сторонних пакетов в проект (вместо ручного скачивания или установки через CDN) • Оформления скриптов тестирования, отладки и сборки в проекте
- 5. Package.json • При вызове команды npm init в пустой папке после ввода данных о проекте будет создан файл package.json. В этом файле хранится вся служебная информация о проекте: зависимости, сценарии и мета- информация.
- 6. Установка пакетов в проект • Все внешние зависимости, установленные при помощи npm, помещаются в папку node_modules проекта. • Для установки зависимости в проекте необходимо вызвать команду npm install --save [название пакета] без квадратных скобок. • Модификатор --save указывает на то, что информация об этой зависимости будет сохранена в package.json. • Папку node_modules необходимо класть в .gitignore, поскольку скачанные зависимости в репозиторий класть не нужно.
- 7. Зависимости проекта • Папка node_modules никогда не передается в репозиторий. Чужие зависимости не передаются, поскольку их всегда можно скачать и установить заново. • Команда npm install проходит по файлу package.json и устанавливает все зависимости в проекте.
- 8. Задача 1. • Создать в репозитории ветку (на хостинге), скачать её и перейти в неё. • Создать папку и в ней - npm-проект. Описать в нём все детали проекта. • Установить в проект зависимости: • http://numeraljs.com/ • https://www.npmjs.com/package/lodash • https://www.npmjs.com/package/date-format • https://www.npmjs.com/package/performance • Положить в .gitignore папку node_modules • Сделать коммит в ветке и отправить на хостинг • Склонировать репозиторий в другую папку, зайти в папку с проектом и установить заново все зависимости
- 9. Модульная архитектура • Модульная архитектура предполагает разбиение всего кода проекта на отдельные файлы – модули, которые связаны между собой экспортами и импортами: export function getSum(a, b) { return a + b; } export function getDifference(a, b) { return a - b; } import {getSum, getDifference} from './functions.js'; console.log(getSum(1, 2)); // 3 console.log(getDifference(4, 2)); // 2 functions.js main.js
- 10. Синтаксис экспорта/импорта • На сегодняшний день существуют два подхода к импорту и экспорту в модулях: 1. Модули CommonJS (используются в Node.js) 2. Модули ECMAScript (используются во Frontend и управляются сборщиками)
- 11. CommonJS – модули const {getSum, getDifference} = require('./functions.js'); console.log(getSum(1, 2)); // 3 console.log(getDifference(4, 2)); // 2 exports.getSum = function(a, b) { return a + b; } exports.getDifference = function (a, b) { return a - b; } index.js functions.js
- 12. ES – модули export function getSum(a, b) { return a + b; } export function getDifference(a, b) { return a - b; } import {getSum, getDifference} from './functions.js'; console.log(getSum(1, 2)); // 3 console.log(getDifference(4, 2)); // 2 functions.js main.js
- 13. Использование зависимостей • В среде Node установленные зависимости используются крайне легко: • В случае с Frontend-разработкой, требуется использовать сборщики для того, чтобы код с NPM-зависимостями работал в браузере. const numeral = require('numeral'); console.log(numeral(1000).format('0,0')); // 1,000
- 14. Импорт npm-зависимостей • В ES6-модулях зависимости импортируются так же, как собственные модули: import numeral from 'numeral'; console.log(numeral(Date.now()).format('0,0'));
- 15. Сборщики • Сборщиками (инструментами сборки) называются инструменты, которые позволяют собирать в удобоваримый для браузера вид весь код проекта, написанный с использованием модульной архитектуры. • Популярные сборщики: • Grunt • Gulp • Rollup • Webpack
- 16. Webpack – установка и начало работы • Сегодня наибольшей популярностью пользуется сборщик Webpack. • Устанавливается как NPM-пакет: npm install --save webpack • После установки в консоли ОС будет доступна команда webpack, которая при запуске сделает сборку всего проекта. • По умолчанию в проекте должен быть файл src/index.js – точка входа в приложение. Именно с него Webpack начнет обработку кода проекта. • По окончании обработки собранный скрипт, который можно подключать в браузере, будет размещён в папке dist проекта.
- 17. Webpack watch • Webpack Watch – возможность запустить Webpack так, чтобы при изменении зависимых файлов проекта сборка запускалась автоматически, без необходимости запускать её вручную. • Для запуска webpack в режиме слежения используется команда webpack –w.
- 18. Задача 2. • Создать модули: • Модуль с данными: массив объектов с автомобилями (название модели, год выпуска, пробег в км). • Модуль с классом Автомобиль. В классе – конструктор, записывающий данные автомобиля в поля создаваемого объекта. • Модуль с функциями по обработке данных. В нём – функции, принимающие массив автомобилей, и делающие: • Поиск самого старого авто. Если таковых несколько, возвращается самое изношенное из них. • Поиск самого изношенного авто. Если таковых несколько, возвращается самое старое из них. • Основной файл. В этом файле импортируются все три модуля, создается массив экземпляров класса, вызываются обе функции и их результат выводится в консоль. • Подключить сборщик к проекту • Подключить собранный скрипт к странице и в консоли получить результат обработки.
- 19. Конфигурации Webpack • У сборщика Webpack довольно много конфигураций, которые позволяют управлять процессом сборки: • Задавать точку входа и точку выхода сборки • Задавать несколько точек сборки • Собирать зависимости не только в js-файлах, но в стилях, html-файлах и для изображений/шрифтов • Подключать плагины пред- и постобработки результатов сборки (например, babel, typescript, scss) • Конфигурация сборки задаётся в файле webpack.config.js в корне проекта (на уровне файла package.json)
- 20. Задача 3. • Подключить к проекту из задачи 2 модуль higcharts. • Настроить сборку так, чтобы точкой входа был файл app.js, а сборка велась в папку build в файл app.js • Вывести на страницу график-гистограмму по среднему годовому пробегу каждой машины.
- 21. Резюме: модульная архитектура • Разбиение проекта на модули и их сборка даёт массу преимуществ: • Небольшие и единые по смыслу легко читаемые файлы • Возможность работать над проектом одновременно нескольким человекам • Простое подключение дополнительных инструментов сборки • Простое подключение сторонних зависимостей в проект • Поддержка IDE: подсказки и автодополнение по собственным и подключаемым модулям
- 22. Дополнительные материалы Node.js и серверная разработка https://habr.com/ru/company/ruvds/blog/4 22893/ Введение в NPM http://prgssr.ru/development/vvedenie-v- paketnyj-menedzher-npm-dlya- nachinayushih.html#heading-section Официальная документация по NPM https://docs.npmjs.com/ CommonJS modules https://nodejs.org/docs/latest/api/modules. html#modules_modules ES import https://developer.mozilla.org/ru/docs/Web/ JavaScript/Reference/Statements/import ES export https://developer.mozilla.org/ru/docs/Web/ JavaScript/Reference/Statements/export Webpack - документация https://webpack.js.org/concepts/