Вы когда-нибудь пытались импортировать библиотеку NPM в ваше ванильное JS-приложение только для того, чтобы узнать, что оно выдает случайные ошибки и что вам нужно самостоятельно управлять всеми зависимостями? Что ж, сегодня мы собираемся настроить весь процесс, написав всего несколько строк кода.
Итак, почему Browserify? Почему не Webpack, Parcel, Rollup и т. д.?
- Практически не требует настройки
- Поддерживает машинопись
- Компилируется и перезагружается при сохранении (с помощью Live Server)
- Делает работу
Давайте начнем!
Во-первых, вам нужно установить Node.js на свой компьютер. Я буду использовать NPM в качестве менеджера пакетов, но вы также можете использовать YARN.
Настройка зависимостей проекта NPM
Перейдите в нужный каталог на вашем компьютере, откройте терминал и введите:
npm init -y
Это создаст файл package.json в каталоге и позволит нам установить любой сторонний пакет, который мы захотим. Давайте попробуем Rx.js.
npm i rxjs
Если мы откроем каталог в редакторе кода, мы должны увидеть package.json, package-lock.json (или yarn.lock, если вы используете YARN) и папку node_modules.
Теперь мы добавим общедоступный каталог, в котором мы собираемся создать файл index.html.
Затем мы создаем еще один каталог в корневом каталоге с именем src. Внутри я создам файл app.js, в котором мы будем писать JavaScript.
Но вы, наверное, спросите, почему я разделяю файлы HTML и JavaScript? Разве они не должны идти вместе?
Да, должны, но не в этом случае. Я объясню.
Изменить правила Интернета
В нашем повседневном веб-приложении мы используем HTML, CSS и обычный JavaScript. В HTML мы пишем структуру, с помощью CSS мы стилизуем ее, а затем добавляем логику с помощью JavaScript.
Все три вместе образуют веб-сайт.
Трио может работать вместе, пока у нас есть действительный файл CSS и действительный файл JavaScript.
Однако файл, который мы собираемся написать (app.js), не будет действительным файлом JavaScript. Вместо этого он будет содержать целую кучу неприятной логики, которую браузеры не понимают — например, импорт тридцатисторонних зависимостей, которые мы только что установили (Rx.js).
Затем мы собираемся использовать наш транспилятор (Browserify), чтобы преобразовать этот файл app.js в читаемый браузером файл ванильного JavaScript, и мы упакуем его как пример выше.
Вот почему мы отделили файл app.js от общего каталога, чтобы случайно не импортировать его в index.html.
Добавьте пакеты NPM в проект
Теперь давайте импортируем и настроим пакет Rx.js, который мы недавно установили в наше приложение. Вы можете сделать то же самое с Lodash, Day.js или любой библиотекой NPM, которая работает в браузере или является кроссплатформенной.
const { of } = require('rxjs');
of('Hello World')
.subscribe(console.log)
Теперь, как мы будем управлять этой штукой?
Добавить
Начнем с установки Browserify в каталог проекта.
npm i browserify
Теперь мы открываем файл package.json, находим пункт «scripts» и добавляем следующий скрипт:
"build-js": "browserify ./src/app.js -o ./public/bundle.js"
Запустить скрипт
npm run build-js # if you're using yarn yarn build-js
Что это будет делать:
- преобразовать наш противный файл app.js в обычный файл JavaScript
- выводить (-o) обычный файл JavaScript как вновь созданный файл bundle.js в общедоступном каталоге
Связывание файлов HTML и JavaScript
Теперь мы собираемся импортировать файл bundle.js в файл index.html с помощью тега script:
<script src="bundle.js"></script>
И дважды щелкните файл index.html, чтобы запустить его в браузере. Виола!
Теперь, если мы можем изменить код app.js, снова запустить скрипт, перезагрузить браузер, и мы должны увидеть новые изменения.
const { of } = require('rxjs');
of('Rx.js is the way to go!')
.subscribe(console.log)
npm run build-js
Но мы еще не совсем там.
Как вы помните, чтобы иметь последний код, нам нужно сохранить, затем запустить тот же скрипт, а затем вручную перезагрузить браузер. Хотелось бы, чтобы был способ автоматизировать, просто нажав кнопку сохранения.
Автоматизируйте процесс сборки
Это немного сложно настроить, так как библиотека, которую мы собираемся установить, будет автоматически преобразовывать app.js в bundle.js, но она победила. не перезагружаем браузер, пока не установим другую зависимость.
Следите за изменениями
Установите другую зависимость Watchify
npm i watchify
Watchify и Browserify работают вместе для переноса файлов при изменениях. Для этого нам нужно добавить еще один скрипт в файл package.json и запустить его:
"watch-js": "watchify ./src/app.js -o ./public/bundle.js", npm run watch-js
Затем мы вносим изменения, нажимаем «Сохранить», и обновленный текст должен быть немедленно отражен в файле bundle.js.
Однако браузер по-прежнему будет показывать старую версию, пока мы не нажмем перезагрузить вручную. Исправим и это.
Перезагрузить браузер
Есть два способа сделать это. Самый быстрый — настроить расширение Visual Studio Code Live Server, которое может перезагружать браузер при изменении. Второй вариант — найти и настроить библиотеку NPM, которая может делать то же самое.
Вариант 1: Расширение живого сервера
Откройте вкладку расширений в Visual Studio Code и найдите Live Server.
Как только вы найдете его, просто нажмите кнопку «Установить».
Что будет делать Live Server, так это перезагружать браузер всякий раз, когда в index.html или в зависимостях, которые он импортирует (bundle.js), происходят какие-либо изменения.
Затем мы возвращаемся в общий каталог, где находится наш файл index.html. Щелкните его правой кнопкой мыши и выберите первый вариант — Открыть с Live Server.
Это запустит новый сервер на вашем компьютере через порт 5500, который будет отображать содержимое вашего файла index.html.
Последняя небольшая деталь, которую нам нужно добавить, — изменить импорт файла bundle.js из обычного скрипта на тип module.
<!-- BEFORE --> <script src="bundle.js"></script> <!-- AFTER --> <script type="module" src="bundle.js"></script>
С помощью сценария Watchify, работающего в обратном направлении, и Live Server, отслеживающего файл index.html, браузер должен автоматически перезагружаться всякий раз, когда мы обновляем наш файл app.js.
Вариант 2: LiveReload NPM-пакет
Если ваш редактор не поддерживает расширение Live Server, вы можете использовать пакет LiveReload. Установите его на свой компьютер и запустите файл index.html. У него очень обширная документация, поэтому я не буду вдаваться в подробности.
Но в основном вы собираетесь установить этот пакет на свой компьютер, а затем запустить файл index.html с помощью пакета LiveReload. Остальная часть работы будет выполняться Browserify/Watchify, как описано выше.
Поддержка TypeScript с режимом просмотра
Последняя часть головоломки — добавить поддержку TypeScript. Начнем с добавления файла app.ts в каталог src. Там мы собираемся написать наш код TypeScript, еще раз транспилировать его и импортировать пакетный файл в index.html.
Мы начнем с установки TypeScript и Tsify, что похоже на Watchify для TypeScript.
npm i typescript tsify
Нам также нужно инициализировать TypeScript в нашем проекте, выполнив:
tsc -init
Это создаст файл tsconfig.json в корневом каталоге. Здесь мы настраиваем конфигурацию TypeScript для нашего проекта.
Теперь мы создаем файл app.ts в каталоге src и импортируем Rx.js.
import { of } from 'rxjs';
of('Hello TS!')
.subscribe(console.log)
Следующим шагом будет добавление скриптов в package.json для сборки и отслеживания изменений.
"build": "browserify ./src/app.ts -p [ tsify --noImplicitAny ] > ./public/bundle.js",
"watch": "watchify ./src/app.ts -p [ tsify --noImplicitAny ] -o ./public/bundle.js"
Выходной файл останется прежним, bundle.js в общедоступном каталоге.
Мы используем некоторые правила TypeScript в квадратных скобках. Эти правила можно найти в tsconfig.json.
После всего этого мы сначала запускаем скрипт сборки, а затем наблюдение.
npm run build npm run watch
Мы также запускаем файл index.html с Live Server.
Демо
Живая перезагрузка в действии!
Примечание. Хотя это консольное приложение, этот процесс также можно использовать для управления DOM.
Предостережения
Процесс автоматической перезагрузки браузера может не сработать с первой попытки. Поэтому вам может потребоваться повторить шаги:
- Откройте файл index.html с помощью Live Server.
- Запустите скрипт сборки
- Запустите скрипт просмотра
- Попробуйте
Репозиторий GitHub
Если вы потеряли след, не волнуйтесь. У меня уже есть целый проект Rx.js TypeScript Browserify на GitHub. Не стесняйтесь клонировать его и играть.
Помните, что файл bundle.js не должен включаться при отправке изменений на GitHub, так как он слишком велик и может быть сгенерирован на лету, просто запустив скрипт сборки или просмотра.
В этой статье показано, как мы можем импортировать сторонние зависимости в наши стандартные приложения JavaScript/TypeScript и автоматизировать процесс сборки.
Увидимся в следующем!
