1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/yayaluoya-layabox-esbuild

Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

LayaBoxEsBuild

NPM version

介绍

  • Использование esbuild для инкрементальной сборки проекта LayaBox. После изменения кода можно сразу увидеть эффект. Это повышает скорость разработки и оптимизирует опыт разработки.

  • Видео-презентация: https://www.bilibili.com/video/BV16w411R7ZT?share_source=copy_web

  • Если у вас есть вопросы, добавьте их в QQ-группу

О esBuild

  • esbuild — это инструмент для упаковки и сжатия JavaScript-кода, написанный на языке Go. Его основные преимущества — высокая скорость работы. На рисунке ниже показано сравнение скорости работы esbuild с другими инструментами для сборки: webpack, rollup, Parcel и др.:

    Изображение взято из репозитория esbuild на GitHub.

Почему он такой быстрый?

  • Он написан на языке Go, который может компилироваться в локальный код для анализа, генерации окончательных файлов сборки и создания исходных карт. Все операции выполняются параллельно без необходимости дорогостоящего преобразования данных.
  • Библиотека была разработана с учётом оптимизации скорости компиляции. Она также старается избегать ненужного выделения памяти.
  • Для более подробного ознакомления рекомендуется обратиться к переводу официального документа esbuild, выполненному Breword.

Сравнение с другими инструментами

Тип инструмента Описание Время обновления после изменения кода Поддержка отладки по точкам останова Рекомендация
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 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MulanPSL-2.0
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/yayaluoya-layabox-esbuild.git
git@api.gitlife.ru:oschina-mirror/yayaluoya-layabox-esbuild.git
oschina-mirror
yayaluoya-layabox-esbuild
yayaluoya-layabox-esbuild
master