esbuild — это инструмент для упаковки и сжатия JavaScript-кода, написанный на языке Go. Его основные преимущества — высокая скорость работы. На рисунке ниже показано сравнение скорости работы esbuild с другими инструментами для сборки: webpack, rollup, Parcel и др.:
Почему он такой быстрый?
Тип инструмента | Описание | Время обновления после изменения кода | Поддержка отладки по точкам останова | Рекомендация |
---|---|---|---|---|
layaAir | Ручная компиляция | Очень долго (год) | Нет | Не рекомендуется |
layair2-cmd | Аналогично первому шагу, но с автоматической компиляцией | Долго (полгода) | Да | Не рекомендуется |
webpack | Автоматическая компиляция, мощный функционал, но может быть медленным для больших проектов | Быстро (день) | Да | Рекомендуется |
Этот инструмент | Автоматическое построение, без компиляции, не зависит от размера проекта | Мгновенно (скорость обновления браузера зависит от его скорости) | Да | Настоятельно рекомендуется |
Установите через npm.
npm i layabox-esbuild -g
Обратите внимание, что это глобальная установка, которая выполняется один раз.
layabox-esbuild -i
Инициализирует файл конфигурации в текущем каталоге с содержимым по умолчанию.
layabox-esbuild -s
|| layabox-esbuild
Сразу начинает сборку проекта. Когда вы увидите следующий вывод, сборка началась. Локальный адрес главной страницы может отличаться, это просто пример. Главная страница загружается быстрее благодаря использованию service worker для кэширования между браузером и сервером.
layabox-esbuild -c <url>
Указывает файл конфигурации для сборки проекта. Не рекомендуется использовать эту опцию. Рекомендуется использовать -i
, чтобы создать файл конфигурации в текущем каталоге и настроить его на основе содержимого этого файла.
В корне проекта создайте файл layaboxEsbuildConfig.js [расположение и имя могут быть любыми, главное — указать правильный путь при выполнении команды]. Затем экспортируйте объект, соответствующий интерфейсу IConfig. Пример конфигурации по умолчанию:
/** Конфигурационные данные */
module.exports = {
/** Прокси для каталога src, может быть абсолютным или относительным путём */
src: './src/',
/** Прокси для каталога bin, может быть абсолютным или относительным путём */
bin: './bin/',
};
Затем выполните команду layabox-esbuild -c ./layaboxEsbuildConfig.js
, чтобы собрать проект с указанной конфигурацией.
layabox-esbuild --log-config [url]
Показывает содержимое файла конфигурации. Если не указан параметр url, будет выведена конфигурация по умолчанию. Пример:
layabox-esbuild -vl
Выводит историю всех версий.
У команды layabox-esbuild есть ярлык leb
, который заменяет layabox-esbuid
.
/**
* Интерфейс конфигурации таблицы
*/
export default interface IConfig {
/** Путь прокси для каталога src, может быть абсолютным или относительным */
src?: string,
/** Путь прокси для каталога bin, может быть абсолютным или относительным */
bin?: string,
/** Массив объектов, содержащих пути к файлам и заменяющие строки */
filePathModify?: {
a: RegExp,
b: string,
}[],
/** Порт прокси, можно указать любое значение, кроме 0, если порт не занят */
port?: {
src: number,
bin: number,
},
/** Имя хоста, которое будет использоваться, когда автоматическое получение имени хоста невозможно */
hostName?: string,
/** Список суффиксов файлов по умолчанию для файлов, импортированных без суффикса */
srcFileDefaultSuffixs?: string[],
/** Имя файла точки входа, относительно каталога src */
mainTs?: string,
/** Адрес главной страницы, относительно каталога bin */
homePage?: string,
/** Скрипт главной страницы, относительно каталога bin */
homeJs?: string,
/** Файл точки входа JavaScript, относительно каталога bin */
mainJs?: string,
/** Время задачи автоматического обновления, в минутах */
autoUpdateTaskTime?: number,
/** Логирование включено */
ifLog?: boolean,
/** Тип точки останова */
breakpointType?: 'vscode' | 'browser',
/** Использовать ли WebSocket-инструмент */
ifOpenWebSocketTool?: boolean,
/** Открывать ли главную страницу при запуске */
ifOpenHome?: boolean,
/** Обновлять ли браузер немедленно */
ifUpdateNow?: boolean,
/** Настройки мониторинга файлов */
fileWatch?: {
/** Конфигурация мониторинга файлов для каталога src */
src: IFileWatch,
/** Конфигурация мониторинга файлов для каталога bin */
bin: IFileWatch,
},
/** Список загрузчиков */
loader?: ILoaderConfig[],
/**
* Метод чтения файлов после загрузки
* Если система не может прочитать целевой файл, этот метод будет вызван
*
*Примечание: некоторые фрагменты текста были изменены для улучшения читаемости.* Использование данного метода не приводит к кэшированию модуля в памяти, поэтому мониторинг не осуществляется. При необходимости можно самостоятельно реализовать кэширование и мониторинг, а затем вызвать метод _update для обновления страницы.
**fileReadBackDoor?**: (_src: string, _update: (_url?: string) => void) => Promise<{
/** 真实路径 */
url?: string;
/** 后缀 */
su?: string;
/** 异常 */
err?: any;
/** данные */
data?: any;
}>;
* **Файл мониторинга**
**Интерфейс IFileWatch:**
- **enable**: логическое значение, указывающее, включено ли оно;
- **usePolling**: логическое значение, определяющее, используется ли опрос. Если опрос используется, это может привести к высокой загрузке процессора. Если опрос не используется, папка может быть недоступна для удаления;
- **interval**: интервал опроса (в миллисекундах), действителен при usePolling = true.
* **Конфигурация загрузчика**
Используется для дополнительной обработки соответствующих файлов и синхронизации с соответствующей системой упаковки для поддержания соответствия между результатами сборки и результатами упаковки. По умолчанию есть path и txt загрузчики для обработки путей ts файлов и импорта txt файлов.
**Интерфейс ILoaderConfig:**
- **name**: имя загрузчика. Будет отображаться при ошибке сборки;
- **include**: регулярное выражение, которое определяет, какие файлы будут обрабатываться загрузчиком;
- **loader**: массив функций загрузчика, которые обрабатывают файлы.
* **Функция обработки загрузчика**
**Интерфейс ILoaderHandleFunction:**
(_content: string, _absolutePath: string, _suffix: string): Promise<string>.
## Внимание
1. Самое важное:
- Этот инструмент не изменяет содержимое проекта, он просто предоставляет более быстрый способ работы.
2. Esbuild только строит проект, не упаковывая код src в файл bin/js/bundle.js, а сохраняя его в памяти. Поэтому его можно использовать только в среде разработки. В конце концов, используйте компиляцию и упаковку Laya для упаковки кода в файл bin/js/bundle.js. Его можно использовать только во время разработки, чтобы ускорить реакцию на изменения кода и не повлиять на окончательные результаты компиляции Laya.
3. Лучший подход — включить инкрементную компиляцию webpack, поскольку esbuild только собирает, но не компилирует. Если компьютер работает медленно, вы можете пропустить этот шаг. Не забудьте скомпилировать с помощью Laya или webpack перед загрузкой кода, иначе файл bin/js/bundle.js не будет обновлён.
4. Благодаря многостороннему кэшированию доступ к этому инструменту очень быстрый, но это также может привести к ошибкам. Если код не обновляется вовремя, перезапустите инструмент и браузер. На данный момент проблем в этой области не обнаружено.
5. Наконец, прилагается скриншот тестовой страницы проекта:
<img src="./res/test.png">
Когда содержимое проекта обновляется, появляется всплывающее окно, сообщающее об обновлении. Вы можете обновить страницу, нажав соответствующую кнопку. Страница автоматически обновится, когда фокус переключится на браузер после переключения из редактора. Разве это не удобно?
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )