Эта статья содержит общий обзор темы, которую вы узнаете в этой статье. Темы, выбранные из «Проекта Одина», курса Javascript, модулей ES. Если вы хотите проверить веб-сайт, ссылка находится внизу этой страницы.

Что вы узнаете из этой статьи?

  • Объяснение того, что такое npm и где он обычно использовался до того, как был принят во внешнем интерфейсе.
  • Описание того, что делает npm init и что такое package.json.
  • Знание того, как устанавливать пакеты с помощью npm.
  • Описание того, что такое сборщик модулей JavaScript, такой как webpack.
  • Объяснение того, что означают понятия «вход» и «выход» применительно к webpack.
  • Кратко объясните, что такое зависимость развития.
  • Объяснение того, что означает «транспиляция кода» и как это связано с фронтенд-разработкой.
  • Краткое описание того, что такое средство запуска задач и как оно используется во фронтенд-разработке.
  • Описание того, как написать скрипт автоматизации npm.
  • Объяснение одного из основных преимуществ написания кода в модулях.
  • Объяснение «именованного» экспорта и экспорта «по умолчанию».

Давайте начнем с первой темы: Объяснение того, что такое npm и где он обычно использовался до того, как был принят во внешнем интерфейсе:

Npm (сокращение от Node Package Manager) — это менеджер пакетов для языка программирования JavaScript. Это менеджер пакетов по умолчанию для среды выполнения JavaScript Node.js. npm позволяет разработчикам JavaScript легко делиться и повторно использовать код, а также упрощает обновление кода, которым вы делитесь, чтобы вы могли создавать удивительные вещи.

Прежде чем получить широкое распространение во внешнем интерфейсе, npm обычно использовался для управления и обмена пакетами кода на бэкэнде, где Node.js часто используется для создания серверных приложений. Однако с появлением интерфейсных фреймворков, таких как React и Angular, npm также становится все более популярным для управления внешними зависимостями. Это сделало его важным инструментом для современной веб-разработки.

Описание того, что делает npm init и что такое package.json:

npm init — это команда, которую вы можете использовать для создания файла package.json для вашего проекта JavaScript. Файл package.json — это файл JSON (нотация объектов JavaScript), который содержит информацию о вашем проекте, включая его зависимости, сценарии и другие сведения. Он используется npm для управления зависимостями и сценариями вашего проекта, а также другими инструментами, взаимодействующими с npm, такими как инструменты сборки и менеджеры пакетов.

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

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

Знание того, как устанавливать пакеты с помощью npm.

Чтобы установить пакеты с помощью npm, вам сначала нужно перейти в каталог, в который вы хотите добавить пакеты, используя командную строку. Затем вы можете использовать команду npm install, за которой следует имя пакета, который вы хотите установить. Например, если вы хотите установить пакет request, вы должны выполнить следующую команду:

npm install request

Это загрузит пакет request из реестра npm и добавит его в каталог node_modules вашего проекта, где npm хранит все пакеты, от которых зависит ваш проект. Вы также можете установить сразу несколько пакетов, указав их имена, разделенные пробелами, например:

npm install request lodash moment

Кроме того, вы можете использовать флаг --save или --save-dev для автоматического добавления пакета в файл package.json. Например, следующая команда установит пакет request и добавит его в раздел dependencies вашего файла package.json:

npm install request --save

Рекомендуется использовать флаг --save, так как он упрощает управление зависимостями вашего проекта. Например, если вы хотите установить все зависимости для своего проекта, вы можете просто запустить команду npm install без каких-либо аргументов, и npm автоматически установит все пакеты, перечисленные в вашем файле package.json.

Описание того, что такое сборщик модулей JavaScript, такой как webpack:

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

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

Короче говоря, сборщик модулей JavaScript, такой как webpack, — это инструмент, упрощающий написание модульного повторно используемого кода для Интернета. Это позволяет вам организовать ваш код в отдельные модули, а затем объединить эти модули в один файл, который может быть загружен веб-браузером. Это упрощает создание больших и сложных веб-приложений и повышает их производительность.

Объяснение того, что означают понятия «вход» и «выход» применительно к webpack.

В webpack «вход» и «выход» — это два ключевых понятия, которые используются для определения конфигурации для объединения ваших модулей JavaScript.

«Вход» указывает точку входа для вашего приложения. Это отправная точка для веб-пакета, когда он начинает собирать пакет. Точка входа обычно представляет собой файл JavaScript, который импортирует другие модули и зависимости, необходимые вашему приложению. Например, вы можете определить свою точку входа следующим образом:

entry: './src/index.js'

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

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
}

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

Кратко объясним, что такое зависимость развития:

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

В npm зависимости разработки указываются в разделе devDependencies файла package.json. Это позволяет использовать команду npm install с флагом --save-dev для автоматического добавления пакета в файл package.json в качестве зависимости разработки. Например, если ваш проект зависит от пакета webpack для сборки, вы можете добавить его как зависимость разработки следующим образом:

npm install webpack --save-dev

Это добавит пакет webpack в ваш файл package.json в разделе devDependencies, например:

{
  "devDependencies": {
    "webpack": "^4.43.0"
  }
}

Когда вы запускаете команду npm install без аргументов, npm автоматически установит все пакеты, перечисленные в разделах dependencies и devDependencies вашего файла package.json. Однако при развертывании проекта вам обычно нужны только пакеты, перечисленные в разделе dependencies, поэтому вы можете исключить зависимости разработки, чтобы уменьшить размер развернутого проекта.

Короче говоря, зависимости разработки — это пакеты, которые используются для задач разработки, но не нужны в окончательной развернутой версии проекта. Обычно они указываются в разделе devDependencies файла package.json и устанавливаются с помощью команды npm install с флагом --save-dev.

Объяснение того, что означает «транспиляция кода» и как это связано с фронтенд-разработкой:

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

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

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

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

Кратко о том, что такое средство запуска задач и как оно используется во фронтенд-разработке:

Средство запуска задач — это инструмент, который автоматизирует общие задачи разработки программного обеспечения. Эти задачи могут включать в себя такие вещи, как сборка, тестирование, линтинг и минимизация кода, а также запуск других инструментов и сценариев командной строки. Исполнители задач часто используются для автоматизации повторяющихся или трудоемких задач, что может помочь повысить эффективность и производительность команды разработчиков.

Во фронтенд-разработке средства запуска задач обычно используются для автоматизации общих задач, таких как создание и объединение кода JavaScript, выполнение тестов и оптимизация ресурсов, таких как изображения и таблицы стилей. Например, средство запуска задач, такое как Grunt или Gulp, можно использовать для определения набора задач, которые следует запускать при изменении определенных файлов или при выполнении определенных команд. Это позволяет разработчикам сосредоточиться на написании кода, а не на ручном запуске сценариев сборки или других задачах.

Исполнители задач также часто используются в сочетании с другими инструментами, такими как инструменты сборки и менеджеры пакетов, для автоматизации более сложных рабочих процессов. Например, средство запуска задач можно использовать для запуска инструмента сборки, такого как Webpack, для объединения модулей JavaScript, или для запуска среды тестирования, такой как Jest, для запуска модульных тестов.

Короче говоря, средство запуска задач — это инструмент, который автоматизирует общие задачи разработки программного обеспечения и часто используется во фронтенд-разработке для повышения эффективности и производительности команды разработчиков.

Опишите, как написать скрипт автоматизации npm:

Чтобы написать сценарий автоматизации npm, вам сначала нужно создать файл package.json для вашего проекта с помощью команды npm init. Вам будет предложено ввести информацию о вашем проекте, такую ​​как его имя и версия, а затем он создаст файл package.json в текущем каталоге.

Когда у вас есть файл package.json, вы можете добавить в него сценарии, которые можно запускать с помощью npm. Для этого вам нужно добавить раздел scripts в файл package.json, а затем определить один или несколько скриптов, которые вы хотите запустить с помощью npm. Например, вы можете определить сценарий для сборки вашего проекта с помощью инструмента сборки, такого как Webpack, например так:

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

Этот сценарий определяет команду build, которую вы можете запустить с помощью npm. Когда вы запустите эту команду, npm запустит команду webpack с указанными аргументами, которая создаст ваш проект с помощью инструмента сборки Webpack.

Вы также можете определить несколько сценариев в разделе scripts вашего файла package.json. Например, вы можете определить скрипт test для запуска тестов вашего проекта и скрипт lint для линтинга кода:

{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "test": "jest",
    "lint": "eslint src"
  }
}

Чтобы запустить сценарий, который вы определили в файле package.json, вы можете использовать команду npm run, за которой следует имя сценария, который вы хотите запустить. Например, чтобы запустить сценарий build, который вы определили выше, вы должны выполнить следующую команду:

npm run build

Это запустит команду webpack, которую вы определили в сценарии build, и создаст ваш проект с помощью Webpack. Вы можете запустить другие сценарии, которые вы определили таким же образом, используя команду npm run, за которой следует имя сценария. Например, чтобы запустить скрипт test, вы должны выполнить следующую команду:

npm run test

Объяснение одного из основных преимуществ написания кода в модулях:

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

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

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

Короче говоря, написание кода в модулях способствует повторному использованию кода и модульности, что может улучшить ремонтопригодность и надежность вашего кода. Это позволяет избежать дублирования и упростить тестирование и обновление кода, что может сэкономить время и снизить риск появления ошибок.

Объясните «именованный» экспорт и экспорт «по умолчанию»:

В JavaScript модули используются для группировки связанного кода в единое целое. Это помогает поддерживать порядок в коде и упрощает его повторное использование и поддержку. Модули могут экспортировать различные типы объявлений, включая переменные, функции и классы.

Два основных типа экспорта в JavaScript называются экспортами и экспортами по умолчанию. Именованные экспорты — это экспорты, специально идентифицированные в коде с помощью ключевого слова export. Например, если у модуля есть функция add, которая должна быть доступна для использования другими модулями, ее можно экспортировать следующим образом:

export function add(x, y) {
  return x + y;
}

Именованные экспорты можно импортировать в другие модули, используя ключевое слово import и имена импортируемых экспортов. Например, если вышеприведенная функция add находилась в модуле с именем math, ее можно было бы импортировать следующим образом:

import { add } from './math';

Экспорт по умолчанию — это особый тип экспорта, который можно использовать для экспорта одной вещи из модуля. Он отмечен ключевым словом default и может быть объявлением любого типа, например функцией, классом или переменной.

Например, модуль может иметь такой экспорт по умолчанию:

export default function add(x, y) {
  return x + y;
}

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

import add from './math';

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

Темы взяты с: https://www.theodinproject.com/lessons/node-path-javascript-es6-modules