Разработчики JavaScript: не боитесь WebPack

Автор оригинала: Martin Capodici.

Начать запись здесь. Лучшие функции JavaScript – вы можете начать действительно просто и узнать его только с помощью текстового редактора и веб-браузером. Вы можете написать простой кусок HTML, добавить немного JavaScript, например оповещение («Hello») И открыть это в вашем браузере. Вы получаете немедленный отзыв о том, что вы делаете. Оттуда вы можете написать код, чтобы сделать что-то, когда вы нажимаете кнопку, отправьте форму и многое другое.

Если вы хотите использовать скрипты других людей, чтобы помочь создать свое приложение, вы можете включить их через SRC атрибут Сценарий тег. Вы можете использовать тег скрипта, чтобы потянуть в отличные библиотеки, например, jQuery jQuery и многие другие, чтобы сделать вашу жизнь легче развивать определенные виды пользовательского интерфейса. Существуют также инструменты для создания таблиц, подобных Excel, или редакторы кода и гораздо больше. Вы можете повторно использовать так много технологий, которые вы можете быстро получить впечатляющее приложение, сделанное за считанные минуты.

Однако там в какой-то момент, когда вы делаете достаточно сложное приложение, вы можете поразить несколько проблем:

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

  Когда вы открываете этот файл в браузере, и откройте инструменты DEV, нажав F12, и щелкните вкладку «Консоль», которую вы увидите, что он также выводит привет.

  Используя зависимость

  WebPack поддерживает требуется Заявление для использования зависимостей в вашем проекте. Есть два основных типа:

  1. Другие файлы в вашем проекте
  2. Другие проекты, доступные через экосистему NPM.

  Давайте попробуем использовать оба и посмотреть, какой WebPack делает с этим.

  Локальные файлы

  Чтобы ссылаться на другой файл JavaScript из вашего index.js Вы просто используете:

  var imported = require('./otherfile.js')
  

  Дать вам представление, index.js может содержать:

  var imported = require('./otherfile.js')
  
  console.log(imported.hello)
  

  и whithfile.js содержит:

  exports.hello = 'hello'
  

  И когда вы запустите WebPack, и запустите сгенерированный main.js Это сделает так, как это было раньше и принтереть привет.

  Это работает, потому что в whithfile.js Объект Экспорт становится возвращаемой стоимостью требуется Позвоните в другой файл. Это как вы телепортируете объект по всему! Точнее, странный код, который мы видели ранее в main.js Модулирует каждый файл, затем запускает модуль для whithfile.js Во-первых, и получите его возвращаемое значение и предоставляет его модулю для index.js Отказ

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

  Пакеты NPM

  Ранее мы использовали NPM, чтобы установить WebPack, инструмент, который мы используем для упаковки наших файлов JavaScript в один файл. Мы также можем использовать NPM для установки зависимостей, которые нам нужны для запуска нашего источника JavaScript. Например, мы можем захотеть использовать популярную библиотеку jQuery, чтобы манипулировать браузером DOM и добавлять или удалять элементы со страницы.

  Давайте сделаем это сейчас.

  Помните ранее, мы добавили WebPack в качестве зависимости разработчиков. Теперь мы добавим jQuery, но как обычная зависимость. jQuery принимается на НПМ под пакетом под названием «jQuery». Чтобы установить это мы запустим:

  npm install jquery
  

  Если мы теперь открываем наши Package.json Мы можем увидеть зависимость сейчас внутри «Зависимости» раздел, а не "Devdependons" Отказ

    "dependencies": {
      "jquery": "^3.4.1"
    },
    "devDependencies": {
      "webpack": "^4.41.5",
      "webpack-cli": "^3.3.10"
    }
  }
  

  С этим установленным теперь мы можем использовать потребовать в нашем JavaScript для использования jQuery. Вот как мы сделаем это inde index.js :

  var $ = require('jquery')
  
  $(document).ready(function() {
    $("
  Hello
  ").appendTo("body");
  });
  

  В этом примере мы используем, требуется, чтобы получить ссылку на jQuery и назначить его переменной под названием $ Как обычно с jQuery. Затем мы идем вперед и используем $ В 2 звонках jQuery One ждать, пока документ будет готов, и как только это так, мы используем его, чтобы добавить «Привет» к документу.

  Если вы следите за вами, теперь можете перезагрузить index.html и посмотреть слово Hello появляется в документе. Ранее оно появилось в консольном журнале.

  Я собираюсь оставить его здесь, пока говорят о WebPack. То, что мы видели, это поведение по умолчанию. Хотя очень настраивается, и вы можете изменить, откуда он получает файлы, где он пишет, будь то «знает» JavaScript (делает его меньше) или нет, и даже использовать плагины и погрузчики, чтобы продлить его для справиться с другими функциями Как и преобразование файлов CSS или компиляции файлов, написанных на других языках программирования, например, TypeScript. Это удивительный мощный инструмент.

  Дайте WebPack a Go, это намного меньше страшно, что кажется сначала. Особенно, если вы начинаете маленький с минимальной конфигурацией.

  Я доступен как наставник, парень программист, кодовый рецензент и репетитор на кодамент, просто протягивайся и скажи привет!

  ..