Js скрипты: Привет, мир!

Leave a Comment / Js / By /

zx – bash скрипты на javascript / Хабр

Bash широко используется в программировании и является превосходным инструментом, но и у него есть свои недостатки. Поэтому Google разработал пакет zx, который позволяет использовать bash внутри javascript / typescript и имеет около 17к звёзд на github. В данной статье будут рассмотрены плюсы и минусы библиотеки, главные аспекты использования и примеры работы.

Стандартная библиотека Node.js предосталяет возможность написания bash скриптов, но zx справляется с этим намного лучше. Пакет реализовывает удобные асинхронные оболочки над child_procces, позволяет не использовать множество аргуметов, а также представляет основные команды bash, такие как cd, pwd и т.п, из коробки.

Фичи


  • Все функции ($, cd, fetch и т.д.) доступны сразу без какого-либо импорта.
  • Выполнение команды возвращает ProcessPromise<T>
  • Поддержка Node.js streams
  • Использование require() в ESM модулях
  • Автоматическое экранирование данных массива, переданных в команду
  • Выполнение markdawn файлов
  • Выполнение скриптов по http

Применение

Для успешной работы следует описать скрипт в ESM модуле. Это необходимо, чтобы использовать оператор await сразу на выполняемой команде. Если необходимо использовать обычный .js/.ts файл, то нужно обернуть функции в void async function () {...}().

В первой строке файла необходимо добавить:

  #!/usr/bin/env zx

Для запуска можно использовать как bash:

  chmod +x ./script.mjs
  ./script.mjs

Так и zx:

  zx ./script.mjs

Чтобы изменить облочку, в которой должен выполняться скрипт, нужно использовать команду $.shell:

  $.shell = '/usr/bin/zsh'

Помимо использования стандартных bash команд с помощью zx можно писать и свои. Для этого следует использовать обёртку вида await $`command`, которая выполняет описанную команду. При нулевом коде завершения программы возвращается объект ProcessPromise<T>, который имеет следующую структуру:

  class ProcessPromise<T> extends Promise<T> {
    readonly stdin: Writable
    readonly stdout: Readable
    readonly stderr: Readable
    readonly exitCode: Promise<number>
    pipe(dest): ProcessPromise<T>
  }

При другом любом другом коде завершения выбрасывается исключение ProcessOutput, которое имеет следующую структуру:

  class ProcessOutput {
    readonly stdout: string
    readonly stderr: string
    readonly exitCode: number
    toString(): string
  }

В случае, когда нужно узнать, какой код возвращает определённая команда, можно применить функцию

notthrow(), использование которой предотвращает выбрасывание исключения и возвращает ProcessPromise<T>.

Используемые пакеты

В zx включено несколько пакетов, которые доступны без импорта. Один из них – chalk, он может быть применён для настройки стилей вывода текста в терминал. Пример использования:

  console.log(chalk.purple('Hello world!'))

Ещё включён пакет fs для работы с файловой системой.

  let greetingMessage = await fs.readFile('./greetings.txt')

Пакет os обеспечивает работу с операционной системой.

  await $`cd ${os.homedir()} && touch Documents/page1.txt`

Сравнение с аналогами

Существует проект shellpy, который реализовывает работу с bash из python, но, к сожалению, так и не вышла stable версия, поэтому использовать его в продакшене — не лучшая идея. Существует возможность использования subprocess в python, но это затратно по времени и не предоставляет настолько же удобной работы, как zx.

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

Кроме этого существует много языков, в которых можно работать с bash, но на их описание уйдёт крайне много времени.

Вывод

zx — мощная библиотека для работы с bash из javascript. Проект развивается и поддерживается Google. В нём уже реализованы основные функции, которые можно легко и быстро использовать без самописных обёрток. Ко всему этому все процессы выполняются асинхронно, что в большинстве случаев улучшает производительность. А сама возможность использования bash в высокоуровневом языке программирования позволяет с лёгкостью писать скрипты для автоматизации процессов в ОС.


На правах рекламы

Облачный хостинг для бизнеса и любых крупных проектов — максимальная конфигурация — 128 ядер CPU, 512 ГБ RAM, 4000 ГБ NVMe, надёжные дата-центры, защита от DDoS-атак «из коробки», активация любого сервера в течение минуты!

Подписывайтесь на наш чат в Telegram.

Полезные скрипты на PHP и JavaScript

Для придания Вашему сайту большей функциональности и информативности, Вам рано или поздно придется использовать некоторые из ниже приведенных скриптов. Мы выкладываем только проверенные и действительно интересные скрипты!

Для удобства поиска скриптов, мы сгруппировали все скрипты в следующие группы:

Наименование темыОценкаПосещенийКом.*
1)JavaScript генератор паролей25991
2)Скрипт звездного рейтинга32487417
3)Скрипт текущей даты и времени на jQuery4185021
4)
Простой скрипт плавающего блока		12158904
5)Создание вкладок при помощи HTML и CSS1893895842
6)Простая форма обратной связи33102223
7)Скрипт рейтинга со звездочками1972850736
8)Скрипт спойлеров в один ряд2755194
9)Скрипт слайдера, спрятанного под спойлер1040125
10)Скрипт спойлера с отдельным размещением заголовка и содержимого12536414
11)Защита сайта от частых обращений к страничкам11514812
12)Добавление комментариев на сайт15849017127
13)Модерация комментариев на сайте1844467
14)		Скрипт спойлера с динамической загрузкой изображений2037387
15)JQuery подсветка строк таблицы2149943
16)Подсветка столбцов и строк таблицы на jQuery2850871
17)Скрипт галереи изображений на jQuery2356634
18)Обновленный скрипт спойлера с плавным открытием и скрытием содержимого22826632100
19)Показать скрытые данные по клику мышки611329611
20)Скрипт выбора цвета фона на jQuery132790812

В начало 123456789 В конец

На данный момент всего на сайте 179 скриптов.

* Количество комментариев к теме, прошедших модерацию.

Если Вы знаете еще какие-нибудь полезные скрипты для вебмастеров и хотите ими поделиться, то пишите нам через форму обратной связи или на форум.

После проверки работоспособности скрипта, мы обязательно добавим Ваши скрипты на сайт, если они будут действительно полезными и интересными для вебмастеров.


Основные возможности: Работа со сценариями | Next.js

Примеры
  • Компонент скрипта
  • Диспетчер тегов Google
  • Google Analytics
  • Пиксель Facebook
  • Клерк
  • Сегментная аналитика

Компонент Script , next/script , позволяет оптимально загружать сторонние сценарии в любом месте вашего приложения Next.js. Это расширение HTML

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

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

Браузеры загружают и выполняют создает некоторые проблемы:

  • По мере увеличения размера и сложности приложения становится все труднее управлять порядком загрузки сторонних сценариев.
  • Streaming и Suspense улучшают производительность страницы за счет скорейшего рендеринга и гидратации нового контента, но атрибуты

    Для начала импортируйте компонент next/script :

     import Script from 'next/script'

    Сценарии страниц

    Чтобы загрузить сторонний скрипт по одному маршруту, импортируйте next/script и включите скрипт непосредственно в компонент вашей страницы:

     import Script from 'next/script'
функция экспорта по умолчанию Dashboard() {
  возвращаться (
    <>
      <Скрипт src="https://example.com/script.js" />
    
  )
}

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

    Сценарии приложений

    Чтобы загрузить сторонний скрипт для всех маршрутов, импортируйте next/script и включите скрипт непосредственно в pages/_app.js :

     import Script from 'next/script'
функция экспорта по умолчанию MyApp({ Component, pageProps }) {
  возвращаться (
    <>
      <Скрипт src="https://example.com/script.js" />
      <Компонент {...pageProps} />
    
  )
}

    Этот сценарий будет загружаться и выполняться при доступе к любому маршруту в вашем приложении. Next.js гарантирует, что скрипт будет загружается только один раз , даже если пользователь перемещается между несколькими страницами.

    Примечание : вам редко нужно загружать сторонний скрипт для каждой страницы вашего приложения. Мы рекомендуем включать сторонние сценарии только на определенные страницы, чтобы свести к минимуму ненужное влияние на производительность.

    Стратегия

    Хотя поведение по умолчанию next/script позволяет загружать сторонние сценарии на любой странице, вы можете точно настроить его поведение при загрузке с помощью стратегия свойство:

    • beforeInteractive : загружать сценарий перед любым кодом Next. js и до того, как произойдет гидратация страницы.
    • afterInteractive : ( по умолчанию ) Загрузите скрипт раньше, но после того, как произойдет некоторое увлажнение страницы.
    • lazyOnload : Загрузить сценарий позже во время простоя браузера.
    • worker : (экспериментальный) Загрузите скрипт в web worker.

    См. next/script Справочная документация по API, чтобы узнать больше о каждой стратегии и вариантах ее использования.

    Примечание : После того, как компонент next/script был загружен браузером, он останется в DOM, и при навигации на стороне клиента сценарий не будет повторно выполняться.

    Выгрузка скриптов в веб-воркер (экспериментальная версия)

    Примечание: Стратегия worker еще не стабильна и пока не работает с приложение/каталог . Используйте с осторожностью.

    Сценарии, использующие стратегию worker , выгружаются и выполняются в веб-воркере с Partytown. Это может повысить производительность вашего сайта, выделив основной поток для остального кода вашего приложения.

    Эта стратегия все еще является экспериментальной и может использоваться только в том случае, если флаг nextScriptWorkers включен в next.config.js :

     module.exports = {
  экспериментальный: {
    следующийScriptWorkers: правда,
  },
}

    Затем запустите next (обычно npm run dev или yarn dev ), и Next.js проведет вас через установку необходимых пакетов для завершения настройки:

     npm run dev
# Вы увидите такие инструкции:
#
# Пожалуйста, установите Partytown, запустив:
#
# установка npm @builder.io/partytown
#
# ...

    После завершения установки определение Strategy="worker" автоматически создаст экземпляр Partytown в вашем приложении и выгрузит сценарий в веб-воркер.

     Сценарий импорта из 'следующий/скрипт'
функция экспорта по умолчанию Home() {
 возвращаться ( <>