Руководство для начинающих по представлению классов и функций с помощью WebPack

В этом руководстве предполагается, что у вас установлен node.js и вы умеете устанавливать и использовать npm. В руководстве также предполагается, что вы знакомы с WebPack или, по крайней мере, хотите начать работу.

Все, что вы узнаете здесь, будет сосредоточено на использовании Gulp. Однако то, что вы узнаете здесь, не специфично для Gulp, и можно ли легко перенести представленные здесь концепции в стандартный файл конфигурации WebPack. Я использую Gulp, так как есть много других вещей, которые мне нравятся, автоматическая компиляция SCSS (да, я знаю, что WebPack тоже может это делать), автоматическая загрузка файлов, уведомления операционной системы и т. д. Все это я планирую создать в будущем.

Стартовый проект

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

index.html
Включает фреймворки Bootstrap и jQuery. Что в настоящее время мы не будем связывать с нашим пользовательским скриптом. Это на 100% возможно и распространено, однако я хочу, чтобы вы могли открыть свой новый связанный файл JavaScript, чтобы увидеть, что происходит внутри него.

Файл индекса также импортирует три пользовательских файла js и тег сценария уровня документа, который имеет некоторые настройки и функциональные возможности.

Эти три файла и тег script уровня документа — это то, что будет объединено в один пакет в ходе этого руководства.

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

validate_form.js
Это взято из примера формы W3schools Bootstrap 4, расположенного по адресу: https: //www.w3schools.com/bootstrap4/bootstrap_forms.asp

Это анонимная функция, которая срабатывает при загрузке документа.

utilities.js
 – это простой файл, содержащий различные функции. Это будет использоваться, чтобы показать, как вы можете объединить все эти случайные функции.

Настройте свою среду

Откройте терминал, перейдите к корневой структуре вашего проекта и выполните команду:

npm init

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

Теперь у вас должен быть новый файл с именем package.json в корневом каталоге.

Теперь, когда проект настроен на использование npm, давайте установим все наши зависимости.

Поскольку мы используем Gulp, давайте сначала установим его.

Если у вас не установлен интерфейс командной строки Gulp, установите его сейчас. Я использую Gulp во всех своих проектах, поэтому я установил его глобально, используя аргумент -g. Но если вы хотите это только для этого конкретного проекта, используйте аргумент -D, чтобы установить его как зависимость разработчика. Если вы хотите установить gulp-cli через глобальный аргумент, возможно, вам придется повысить свои привилегии. Поскольку я использую Mac, мне нужно добавить к команде префикс sudo.

Для глобального использования запустите:

sudo npm install gulp-cli -g

или для локального проекта используйте аргумент -D.

npm install gulp-cli -D

После установки пакета gulp-cli давайте добавим пакет Gulp в качестве зависимости разработчика для нашего проекта -D. Запустите команду:

npm install gulp -D

Эта команда добавит в файл package.json новый объект с именем devDependencies и покажет gulp как объект с последней версией в качестве значения. .

Теперь пусть gulp настроит для нас gulpfile.js, выполнив:

npx -p touch nodetouch gulpfile.js

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

Поскольку мы используем Gulp для создания WebPack, мы будем использовать пакет webpack-stream, предназначенный для работы с gulp.

Установите это, запустив

npm install webpack-stream -D

Теперь мы готовы приступить к изменению файлов наших проектов.

Подготовка файлов проекта

Сначала создайте новую папку с именем «src» на том же уровне, что и папка «public», и добавьте еще одну папку с именем «js» в тот.

Затем переместите все файлы «public/assets/js» во вновь созданную папку «src/js».

Добавьте новый файл js с именем «bundle.js» в папку «src». Он не обязательно должен быть в папке js.

ПРИМЕЧАНИЕ. Мне нравится хранить частичные js-файлы в отдельной папке. Поскольку «bundle.js» — это место, куда будут импортированы все частичные файлы, я предпочитаю оставить его на родительском уровне папки js. Но если вы хотите, вы можете поместить его и в папку js. Выбор дилера.

Теперь структура вашей папки должна выглядеть так:

Забавный факт. Имя папки src — это отраслевой стандарт. Вы можете назвать это как угодно. Вы можете поставить его где угодно.

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

<script src=”assets/js/bundle.js”></script>

Если у вас открыта индексная страница в браузере — обновите ее и посмотрите в консоль браузера. Вы должны увидеть некоторые ошибки. Что хорошо. Страница не может найти ни одной из своих ссылок.

ПРИМЕЧАНИЕ. Я называю наш новый связанный js-файл bundle.js, но вы можете назвать его как угодно. Если вы используете Vue.js, возможно, уже существует что-то под названием app.js. Итак, чтобы предотвратить коллизии и показать, что мы создаем собственный связанный файл, я просто назову его bundle.js.

После настройки файла индекса и перемещения файлов js мы готовы приступить к созданию файла Gulp.

Файл глотка

Откройте файл gulpfile.js в своей среде IDE.

Давайте начнем с импорта пакетов Gulp и WebPack и присвоим им описательные имена для удобства.

const gulp        = require(‘gulp’),
      gulpWebpack = require(‘webpack-stream’);

Далее давайте определим некоторые переменные, относящиеся конкретно к нашим файлам JavaScript. Я решил поместить их в свой собственный объект. Таким образом, в будущем, если вы решите добавить возможность загрузки SCSS или SFTP в свой файл gulp, вы сможете легко создавать новые объекты, содержащие переменные для этих модулей. Чтобы все было красиво и аккуратно.

const JS_CONFIG = {
         FILE_NAME        : ‘bundle.js’,
         LOCAL_DESTINATION: ‘./public/assets/js/’,
         SOURCES          : ‘./src/’,
         JS_FILES_TO_WATCH: ‘./src/**/*.js’
};

Давайте разберем это.

• FILE_NAME: относится к имени родительского js-файла, в котором будет храниться вся наша логика.
• LOCAL_DESTINATION: здесь мы хотим разместить наш окончательный скомпилированный файл.
• ИСТОЧНИКИ: место, где хранятся файлы js. Позже к нему будет добавлен префикс FILE_NAME.
• JS_FILES_TO_WATCH: это то, что мы в конечном итоге разрешим для автоматической компиляции при внесении изменений.

ПРИМЕЧАНИЕ: предыдущий ./ просто относится к «этой папке». Каждый путь в файле gulpfile.js будет относиться к его расположению.

Наконец, давайте создадим объект webpackConfig, который будет содержать все параметры конфигурации. Мы структурируем этот объект в соответствии с собственными настройками конфигурации WebPack, чтобы мы могли просто передать его во время инициализации.

const webpackConfig = {
          entry : ‘./src/bundle.js’,
          mode  : ‘development’,
          output: {
                   filename : JS_CONFIG.FILE_NAME,
                   library : ‘MyCustomLibrary’
                  }
};

Давайте разберем это.

• entry: файл, который будет использоваться в качестве шаблона для создания нашей библиотеки.
• режим: это текущий режим, для которого мы создаем
• output.filename: имя файла, который мы будем выводить.
• output.library: имя переменной для доступа к нашей библиотеке.

Функция компиляции

Давайте создадим функцию с именем compileScripts(). Это использует наши свойства JS_CONFIG.

function compileScripts() {
     return gulp.src(JS_CONFIG.SOURCES + JS_CONFIG.FILE_NAME)
                .pipe(gulpWebpack(webpackConfig))
                .pipe(gulp.dest(JS_CONFIG.LOCAL_DESTINATION));
}

Методы src() и dest() предоставляются Gulp для взаимодействия с файлами на вашем компьютере.
Чаще всего подключаемые модули будет помещен между src() и dest() с помощью метода .pipe() и преобразует файлы в потоке.

Дополнительную информацию о src() и dest() см. здесь: https://gulpjs.com/docs/en/getting-started/working-with-files #работа-с-файлами

src()возьмет файл, с которым мы работаем, затем .pipe(dest()) сохранит все изменения, сделанные во время pipe(). > цепные методы.

Если вы решите, что хотите минимизировать или ухудшить свой js, вы должны добавить эту функциональность в цепочку с помощью метода pipe().

В этом случае мы собираемся передать gulpWebpack() файл конфигурации, который мы создали. Если вам интересно, откуда берется gulpWebpack, это то, как мы назвали его, когда импортировали в начало файла gulpfile.js.

Наконец, мы создадим задачу Gulp. Мы даем задаче имя и передаем ей только что созданную функцию.

gulp.task(‘scripts-compile’, compileScripts);

Чтобы закончить этот раздел, мы собираемся открыть файл bundle.js и вверху добавить:

export default alert(‘Oh, hello.’);

Сохраните файл, откройте терминал и выполните команду:

gulp scripts-compile

Через некоторое время скрипт завершит компиляцию.

Вернитесь в браузер и обновите index.html. Теперь вы должны увидеть предупреждение с надписью «О, привет».

Часть, ради которой вы, вероятно, пришли сюда

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

Вы экспортируете что-то из одного файла, а затем можете импортировать в другой.

В нашем случае мы хотим экспортировать весь класс Lookup, функцию uniqueID() в utilities .js и весь модуль validate_form.js. Затем импортируйте их в наш файл bundle.js, чтобы WebPack мог объединить все это в один файл.

Подробнее об экспорте: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export.

Пришло время изменить наши файлы, чтобы подготовить их к экспорту.
Это ОЧЕНЬ просто.

Откройте Lookup.js и добавьте «экспорт по умолчанию» перед ключевым словом класса.

export default class Lookup {
//..
}

Откройте utilities.js и добавьте экспорт в функцию uniqueID(). Позже я покажу вам, как получить все функции.

export function uniqueID(length = 10) {
//..
}

Видите, как просто было подготовить наши уже написанные файлы для WebPack?

Откройте bundle.js и удалите строку предупреждения, которую мы добавили ранее.

Добавьте следующее, и мы объясним это ниже.

require(‘./js/validate_form’);
import Lookup from “./js/Lookup”;
import {uniqueID} from “./js/utilities”;
export {Lookup, uniqueID};

По сути, мы ИМПОРТИМ ЭКСПОРТИРУЕМ элементы из отдельных файлов.
Затем файл bundle.js сам экспортирует их в наш новый файл bundle.js.

Оператор require(‘./js/validate_form’) импортирует всю вызывающую саму себя анонимную функцию. Поскольку он не требует внешней настройки или взаимодействия с нашей стороны, мы можем просто включить весь файл с помощью оператора require.

Нам нужно передать некоторые настройки и строки запроса в класс Lookup, поэтому мы явно экспортируем Lookup. Если вы помните, в файле webpackConfig мы назвали нашу библиотеку MyCustomLibrary. Вот как мы будем получать доступ к классам, методам и другим функциям.

Теперь мы можем явно использовать MyCustomLibrary.Lookup для получения ссылки на класс Lookup.

Файл utilities.js — это просто набор простых функций. В настоящее время сайт использует только функцию uniqueID(). Чтобы не раздувать окончательный файл bundle.js, WebPack будет игнорировать любую функцию, которая не экспортируется явно. Мы должны обернуть uniqueID в {}, так как это объект.
Если вы пометите тегом export функцию add(), вы нужно будет использовать:

import {uniqueID, add} from “./js/utilities”;

Если вы помечаете все свои функции как экспортируемые и хотите импортировать их все, а не перечислять их по отдельности, самым простым подходом будет импортировать все и присвоить этому объекту имя.

import * as utils from “./js/utilities”;

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

export {Lookup, utils};

Имейте в виду, что при таком подходе вам потребуется доступ к uniqueID, add или любым другим экспортированным методам, например MyCustomLibrary.utils.add(2,2).

Готовый файл bundle.js выглядит так:

require(‘./js/validate_form’);
import Lookup from “./js/Lookup”;
//import {uniqueID} from “./js/utilities”;
//import {uniqueID, add} from “./js/utilities”;
import * as utils from “./js/utilities”;
//export {Lookup, utils, add};
export {Lookup, utils};

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

Переключитесь на свой терминал и выполните команду:

gulp scripts-compile

Теперь давайте изменим файл index.html, чтобы он работал с нашим новым пакетом bundle.js.

Отредактируйте строку new Lookup(), добавив MyCustomLibrary. в начало имени класса, чтобы она выглядела следующим образом:

let search = new MyCustomLibrary.Lookup({url: ‘my/api/link/here/or/whatever’});

Несколькими строками ниже, где метод onclick кнопки вызывает функцию uniqueID(), отредактируйте его, включив в него MyCustomLibrary.utils.uniqueID(), чтобы он выглядел так:

$(“#code_area”).text(MyCustomLibrary.utils.uniqueID());

Переключите браузер и обновите страницу. Все будет работать так, как было до конвертации. Если вы просмотрите исходный код страницы, прокрутите вниз до того места, где мы импортировали файл bundle.js, и просмотрите его, вы увидите весь упакованный файл.

Вот оно! Теперь вы можете сделать все свои файлы JavaScript модульными, чтобы их было легче поддерживать.

БОНУСНЫЙ РАУНД

Это было много, чтобы понять, но помните тот встроенный блок кода JavaScript в файле index.html, который мы только что отредактировали, чтобы включить доступ к нашей библиотеке? Вот как вы можете включить его в файл webpack.

Вырежьте раздел между тегами ‹script› из HTML-файла и вставьте его под оператором экспорта в bundle.js.

Удалите MyCustomLibrary. из Lookup и utils.uniqueID(), убедитесь, что вы оставили utils присоединенными к uniqueID().

Запустите gulp scripts-compile еще раз, затем обновите страницу index.html. Все еще будет работать!

В следующих статьях я покажу вам, как минимизировать и изолировать ваш код, добавить компиляцию SCSS, конвертировать из ES6 в ES5 для максимальной совместимости, отслеживайте изменения в любом файле js или scss и мгновенно компилируйте их, а также выполняйте автоматическую загрузку по FTP/SFTP, используя один и тот же файл gulp!

Наслаждаться!